/* ============================================================
   Albatros · Estilos
   Identidad: alto contraste (tinta/blanco) + acento coral.
   ============================================================ */

:root {
  --tinta:   #141416;   /* negro tinta, texto y botones */
  --carbon:  #2f2f2f;
  --gris:    #6b6b72;   /* texto secundario */
  --linea:   #e4e3e7;   /* bordes finos */
  --fondo:   #f4f4f5;   /* fondo frío (no crema) */
  --panel:   #ffffff;
  --coral:   #de707b;   /* acento de marca */
  --coral-d: #c65a66;   /* coral oscuro para hover/foco */
  --error-bg:#fdecee;
  --error-tx:#a02b38;
  --radio:   14px;
  --sombra:  0 18px 40px -24px rgba(20,20,22,.45);
  --fuente:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* ---- Pantalla de acceso ---- */
.pantalla-centro {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tarjeta-acceso {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px 34px 34px;
}

.marca { text-align: center; margin-bottom: 26px; }

.albatros { width: 76px; height: auto; color: var(--coral); display: inline-block; }

.wordmark {
  margin: 6px 0 4px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gris);
  text-transform: uppercase;
}

/* ---- Formulario ---- */
.formulario { display: flex; flex-direction: column; }

.formulario label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--carbon);
  margin: 14px 0 6px;
}

.formulario input {
  font: inherit;
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.formulario input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(222,112,123,.25);
}

.btn-primario {
  margin-top: 22px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--tinta);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease;
}
.btn-primario:hover { background: #000; }
.btn-primario:active { transform: translateY(1px); }
.btn-primario:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ---- Alertas ---- */
.alerta {
  background: var(--error-bg);
  color: var(--error-tx);
  border: 1px solid #f4c6cc;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 6px;
}
.exito {
  background: #eafaf1;
  color: #1c7a49;
  border: 1px solid #bde9cf;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}

/* ---- Barra superior (panel) ---- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.barra-marca { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; font-size: 20px; }
.albatros-mini { width: 30px; height: auto; color: var(--coral); }
.barra-menu { display: flex; align-items: center; gap: 18px; flex: 1; padding-left: 28px; overflow-x: auto; }
.barra-menu a { font-size: 14px; font-weight: 600; color: var(--gris); text-decoration: none; white-space: nowrap; }
.barra-menu a:hover, .barra-menu a.activo { color: var(--tinta); }
.barra-usuario { display: flex; align-items: center; gap: 12px; }
.barra-nombre { font-weight: 600; }
.chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--coral-d);
  background: rgba(222,112,123,.12);
  border: 1px solid rgba(222,112,123,.3);
  padding: 4px 10px;
  border-radius: 999px;
}
.btn-salir {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
  border: 1.5px solid var(--linea);
  padding: 7px 14px;
  border-radius: 9px;
}
.btn-salir:hover { border-color: var(--coral); color: var(--coral-d); }

/* ---- Contenido ---- */
.contenido { max-width: 720px; margin: 0 auto; padding: 40px 22px; }
.contenido h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 6px; }
.sub { color: var(--gris); margin: 0 0 26px; }
.tarjeta-info {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px 22px;
}
.tarjeta-info p { margin: 6px 0; }
.nota { color: var(--gris); font-size: 14px; margin-top: 22px; }

/* ---- Contenido ancho (páginas con tabla) ---- */
.contenido-ancho { max-width: 980px; margin: 0 auto; padding: 34px 22px 60px; }
.encabezado-pagina { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.btn-nuevo {
  text-decoration: none; font-weight: 700; font-size: 14px;
  color: #fff; background: var(--tinta); padding: 10px 16px; border-radius: 9px;
}
.btn-nuevo:hover { background: #000; }

/* ---- Tabla ---- */
.tabla-envoltorio { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th, table.tabla td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
table.tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 700; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tr.inactivo { opacity: .5; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-on  { color: #1c7a49; background: #eafaf1; }
.badge-off { color: var(--gris); background: var(--fondo); }
.acciones { display: flex; gap: 10px; }
.acciones a, .acciones button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta);
  background: none; border: 1px solid var(--linea); padding: 5px 10px; border-radius: 7px;
  cursor: pointer; text-decoration: none;
}
.acciones a:hover, .acciones button:hover { border-color: var(--coral); color: var(--coral-d); }

/* ---- Formulario de usuario (ancho, dos columnas) ---- */
.form-ancho { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px 30px; max-width: 640px; }
.form-ancho label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--carbon); margin: 16px 0 6px; }
.form-ancho input, .form-ancho select {
  font: inherit; width: 100%; padding: 11px 13px; border: 1.5px solid var(--linea);
  border-radius: 9px; background: #fff; color: var(--tinta);
}
.form-ancho input:focus, .form-ancho select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(222,112,123,.25); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.modulos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 8px; }
.modulo-item { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.modulo-item input { width: auto; }
.ayuda { font-size: 13px; color: var(--gris); margin: 4px 0 0; }

.acciones-form { display: flex; gap: 12px; margin-top: 26px; }
.btn-secundario {
  text-decoration: none; font-weight: 600; font-size: 14px; color: var(--tinta);
  border: 1.5px solid var(--linea); padding: 12px 18px; border-radius: 10px;
}
.btn-secundario:hover { border-color: var(--coral); color: var(--coral-d); }

@media (max-width: 560px) {
  .fila-2, .modulos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .tarjeta-acceso { padding: 32px 22px 26px; }
  .wordmark { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}