/* =====================================================================
   KIMIKOLOR · Portal de Quejas Anónimas
   Sistema visual — construido sobre Bootstrap 5 con identidad propia.

   Concepto: confianza + confidencialidad. Fondo claro y sereno,
   rojo de marca usado con moderación, tipografía técnica y legible.
   ===================================================================== */

:root {
  --tinta:        #16203a;   /* azul-tinta: texto y superficies oscuras (seguridad) */
  --tinta-90:     #1f2c48;
  --rojo:         #e42a1e;   /* rojo de marca Kimikolor */
  --rojo-oscuro:  #c41f14;
  --fondo:        #f4f6f9;   /* gris muy claro y frío */
  --superficie:   #ffffff;
  --borde:        #e4e8ee;
  --borde-fuerte: #d3d9e3;
  --texto:        #1b2434;
  --texto-suave:  #626c7e;
  --verde:        #1c7a54;   /* verde sereno: confidencialidad / éxito */
  --verde-suave:  #e8f4ee;
  --ambar:        #b26a00;
  --ambar-suave:  #fbf1df;

  --sombra-sm: 0 1px 2px rgba(22, 32, 58, .06);
  --sombra:    0 6px 24px rgba(22, 32, 58, .08);
  --sombra-lg: 0 18px 48px rgba(22, 32, 58, .12);
  --radio:     14px;
  --radio-sm:  10px;

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --cuerpo:  "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--cuerpo);
  color: var(--texto);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, .display {
  font-family: var(--display);
  letter-spacing: -.01em;
  color: var(--tinta);
}

a { color: var(--rojo-oscuro); }
a:hover { color: var(--rojo); }

.text-rojo   { color: var(--rojo) !important; }
.text-tinta  { color: var(--tinta) !important; }
.text-suave  { color: var(--texto-suave) !important; }
.bg-tinta    { background-color: var(--tinta) !important; }

/* --- Barra superior --------------------------------------------------- */
.barra {
  background: var(--tinta);
  color: #fff;
}
.barra .marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: #fff;
}
.barra .marca img { height: 34px; width: auto; display: block; }
.barra .marca .sub {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fb0cf;
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: .7rem;
  line-height: 1.2;
}
.barra a.enlace-barra {
  color: #c6d2e6;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
}
.barra a.enlace-barra:hover { color: #fff; }

/* --- Sello de confidencialidad (elemento firma) ---------------------- */
.sello-conf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid rgba(28,122,84,.18);
}
.sello-conf svg { flex: 0 0 auto; }

/* --- Hero -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(228,42,30,.10), transparent 60%),
    linear-gradient(180deg, #0f1830 0%, #16203a 100%);
  color: #eef2f8;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* franja fina roja: acento de marca */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rojo), #ff6b52);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.06;
}
.hero .lead { color: #c3ccdb; max-width: 42ch; }
.hero .marca-acento { color: var(--rojo); }

/* --- Tarjetas ---------------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.tarjeta-elevada { box-shadow: var(--sombra); }

/* Tarjeta seleccionable de tipo de usuario */
.opcion-usuario {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.6rem;
  height: 100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.opcion-usuario:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-lg);
  border-color: var(--borde-fuerte);
  color: inherit;
}
.opcion-usuario .icono {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(228,42,30,.08);
  color: var(--rojo);
  margin-bottom: 1rem;
}
.opcion-usuario h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.opcion-usuario .flecha {
  color: var(--rojo);
  font-weight: 600;
  font-size: .92rem;
  margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .3rem;
}

/* --- Pasos (proceso) --------------------------------------------------- */
.pasos { counter-reset: paso; }
.paso .num {
  font-family: var(--display);
  font-weight: 700;
  color: var(--rojo);
  font-size: .9rem;
  letter-spacing: .1em;
}

/* --- Botones ----------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-rojo {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}
.btn-rojo:hover, .btn-rojo:focus {
  background: var(--rojo-oscuro);
  border-color: var(--rojo-oscuro);
  color: #fff;
}
.btn-tinta {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.btn-tinta:hover { background: var(--tinta-90); border-color: var(--tinta-90); color: #fff; }
.btn-contorno {
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta);
}
.btn-contorno:hover { background: #f0f2f6; color: var(--tinta); }

/* --- Formularios ------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--tinta); font-size: .93rem; }
.form-control, .form-select {
  border-radius: var(--radio-sm);
  border-color: var(--borde-fuerte);
  padding: .65rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 .2rem rgba(228,42,30,.12);
}
.ayuda { color: var(--texto-suave); font-size: .85rem; }

/* Radios grandes (tipo de identificación) */
.opcion-radio {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcion-radio:has(input:checked) {
  border-color: var(--rojo);
  background: rgba(228,42,30,.04);
}
.opcion-radio input { margin-top: .2rem; }

/* Zona de arrastre de archivos */
.dropzone {
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 1.6rem;
  text-align: center;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.activa {
  border-color: var(--rojo);
  background: rgba(228,42,30,.03);
}
.dropzone .icono { font-size: 1.8rem; }
.lista-archivos .archivo {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  font-size: .9rem;
}
.lista-archivos .archivo .quitar {
  margin-left: auto;
  border: none; background: transparent;
  color: var(--texto-suave); cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}
.lista-archivos .archivo .quitar:hover { color: var(--rojo); }

/* --- Folio (código de seguimiento) ------------------------------------ */
.folio-caja {
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: .06em;
  font-weight: 600;
  background: var(--tinta);
  color: #fff;
  padding: 1rem 1.4rem;
  border-radius: var(--radio);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.folio-caja button {
  border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff;
  border-radius: 8px; padding: .3rem .6rem;
  font-size: .8rem; font-family: var(--cuerpo); cursor: pointer;
}
.folio-caja button:hover { background: rgba(255,255,255,.12); }

/* --- Insignias de estado ---------------------------------------------- */
.insignia {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
}
.estado-nueva      { background: #e7eefb; color: #274b96; }
.estado-revision   { background: var(--ambar-suave); color: var(--ambar); }
.estado-resuelta   { background: var(--verde-suave); color: var(--verde); }
.estado-descartada { background: #eef0f3; color: #6a7482; }
.insignia-ambito   { background: #f0e9ff; color: #5b3ea8; }
.insignia-externo  { background: #e6f2f1; color: #1d6b6b; }
.insignia-interno  { background: #fbe9ec; color: #a52036; }

/* --- Panel de administración ------------------------------------------ */
.admin-shell { min-height: 100vh; display: flex; }
.admin-lateral {
  width: 250px;
  background: var(--tinta);
  color: #cbd5e6;
  flex-shrink: 0;
  padding: 1.2rem;
  position: sticky; top: 0; height: 100vh;
}
.admin-lateral .marca img { height: 30px; }
.admin-lateral .nav-link {
  color: #b4c1d8;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-weight: 500;
  display: flex; align-items: center; gap: .6rem;
}
.admin-lateral .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-lateral .nav-link.activo { background: var(--rojo); color: #fff; }
.admin-main { flex: 1; min-width: 0; background: var(--fondo); }
.admin-top {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: 1rem 1.6rem;
}

/* Tarjetas de estadística */
.stat {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.2rem 1.3rem;
}
.stat .cifra { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--tinta); }
.stat .rotulo { color: var(--texto-suave); font-size: .88rem; }

/* Tabla */
.tabla-quejas { background: var(--superficie); border-radius: var(--radio); overflow: hidden; }
.tabla-quejas thead th {
  background: #f7f9fc;
  color: var(--texto-suave);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--borde);
  font-weight: 700;
}
.tabla-quejas td { vertical-align: middle; }
.folio-mono { font-family: var(--display); font-weight: 600; letter-spacing: .03em; }

/* Barra simple para estadística por tipo */
.barra-stat { background: #eef1f6; border-radius: 999px; height: 10px; overflow: hidden; }
.barra-stat > span { display: block; height: 100%; background: var(--rojo); }

/* --- Pie --------------------------------------------------------------- */
.pie {
  background: var(--tinta);
  color: #9fb0cf;
  font-size: .88rem;
}
.pie a { color: #c6d2e6; }

/* --- Accesibilidad / motion ------------------------------------------- */
:focus-visible { outline: 3px solid rgba(228,42,30,.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Responsive del panel --------------------------------------------- */
@media (max-width: 860px) {
  .admin-lateral {
    position: static; width: 100%; height: auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
  }
  .admin-lateral nav { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; }
  .admin-shell { flex-direction: column; }
}