/* =====================================================================
   Portal PROMSAN — mismos tokens visuales que promsan.mx
   Fuente: artifacts/industrial-landing/src/index.css y componentes
   (Navbar, Footer, Button) del sitio principal, revisados el 22-sep-2026.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* Verde bosque industrial — igual que --primary: hsl(175 57% 18%) del sitio */
  --brand-text:    #144844;   /* color de texto/links (= --primary) */
  --brand-dark:    #0d241b;   /* extremo oscuro del degradado de botones */
  --brand-mid:     #0b5d51;   /* extremo claro del degradado de botones */
  --brand-border:  rgba(13, 36, 27, .18);  /* sombra dura de botones/nav */
  --brand-soft-bg: #eef3f0;   /* fondo del footer del sitio */
  --accent-gold:   #bd8922;   /* dorado del manual, solo acentos puntuales */

  --texto:   #1b1f1d;
  --muted:   #5b675f;
  --borde:   #dfe6e1;
  --error:   #b3261e;
  --exito:   #1b7a3d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Instrument Sans", sans-serif;
  color: var(--texto);
  background-color: #fff;
  /* misma textura de puntos que el body del sitio principal */
  background-image: radial-gradient(rgba(13, 36, 27, 0.18) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

a { color: var(--brand-text); }

/* --- Barra superior (glass-panel, igual que el Navbar del sitio) --- */
.topbar {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 32px; width: auto; display: block; }
.marca-texto {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
  color: var(--brand-text);
}

.topbar-nav { display: flex; align-items: center; gap: 20px; }
.topbar-nav a, .topbar-nav span.usuario {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-text);
  text-decoration: none;
}
.topbar-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.topbar-nav span.usuario { color: var(--muted); font-weight: 500; }

.contenedor {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* --- Tarjetas (mismo tratamiento que el Card de shadcn del sitio) --- */
.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* --- Login --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 380px;
}

.volver-link {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  align-self: flex-start;
}
.volver-link:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 4px; }

.login-caja {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  text-align: center;
}

.login-logo { height: 44px; width: auto; margin-bottom: 20px; }

.login-caja h1 {
  font-size: 1.05rem;
  margin: 0 0 28px;
  text-align: center;
  color: var(--brand-text);
}

label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 6px;
  text-align: left;
}

input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 0.35rem;
  margin-bottom: 18px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--texto);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 2px rgba(11, 93, 81, .15);
}

/* --- Botones: firma visual del sitio (cuadrado, degradado, sombra dura) --- */
button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  color: #fff;
  border: 1px solid var(--brand-dark);
  border-radius: 0;
  padding: 10px 20px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--brand-border);
  transition: transform .15s ease, box-shadow .15s ease;
}
button:hover, .boton:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--brand-border);
  color: #fff;
}

.boton-secundario {
  background: transparent;
  color: var(--brand-text);
  border: 1px solid var(--borde);
  box-shadow: none;
}
.boton-secundario:hover {
  transform: none;
  box-shadow: none;
  background: rgba(13, 36, 27, .04);
  border-color: var(--brand-mid);
}

.mensaje-error {
  background: #fdecea;
  color: var(--error);
  padding: 10px 14px;
  border-radius: 0.35rem;
  margin-bottom: 16px;
  font-size: .85rem;
  text-align: left;
}

.mensaje-exito {
  background: #e8f5ea;
  color: var(--exito);
  padding: 10px 14px;
  border-radius: 0.35rem;
  margin-bottom: 16px;
  font-size: .85rem;
  text-align: left;
}

/* --- Dashboard: tarjetas de plataformas --- */
.grid-plataformas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.plataforma-card {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--texto);
  box-shadow: 3px 3px 0 0 var(--brand-border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plataforma-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--brand-border);
  border-color: var(--brand-mid);
}

.plataforma-card .icono { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.plataforma-card strong {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .9rem;
}
.plataforma-card .nota {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent-gold);
  font-weight: 700;
  margin-top: 6px;
}

/* --- Tablas de administración --- */
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--borde); font-size: .85rem; }
th {
  background: var(--brand-soft-bg);
  color: var(--brand-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-admin    { background: #eef3f0; color: var(--brand-text); }
.badge-empleado { background: #e6efee; color: var(--brand-mid); }
.badge-cliente  { background: #f6efe1; color: var(--accent-gold); }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones .boton, .acciones .boton-secundario { padding: 6px 14px; font-size: .68rem; box-shadow: none; }
.acciones .boton:hover { transform: none; }

.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.form-inline input[type=text] { margin: 0; width: 140px; }
.form-inline button { padding: 8px 14px; font-size: .7rem; box-shadow: none; }
.form-inline button:hover { transform: none; }

.encabezado-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.encabezado-lista h2 { margin: 0; }

/* Envuelve cada <table> para que en pantallas angostas se deslice
   horizontalmente dentro de su propio carril, en vez de desbordar toda
   la página (que es lo que pasaba antes en el panel de admin). */
.tabla-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  margin-top: 16px;
}
.tabla-scroll table { margin-top: 0; border: none; min-width: 640px; }
.tabla-scroll th:first-child, .tabla-scroll td:first-child { padding-left: 16px; }
.tabla-scroll th:last-child, .tabla-scroll td:last-child { padding-right: 16px; }

/* =====================================================================
   Responsive — teléfono / pantallas angostas
   ===================================================================== */
@media (max-width: 640px) {
  .contenedor { padding: 24px 16px; }

  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }

  .topbar {
    padding: 10px 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .marca img { height: 26px; }
  .marca-texto { font-size: .75rem; }
  .topbar-nav { gap: 12px; flex-wrap: wrap; }
  .topbar-nav a, .topbar-nav span.usuario { font-size: .72rem; }

  .login-caja { padding: 28px 20px; max-width: 100%; }
  .login-logo { height: 36px; }

  .tarjeta { padding: 18px; }

  .grid-plataformas { grid-template-columns: 1fr; gap: 14px; }

  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .boton, .acciones .boton-secundario { text-align: center; }

  button, .boton { padding: 10px 16px; font-size: .74rem; }
}