/* =============================================================
   Comercio Exterior Bolivia - hoja de estilos
   ESTE ARCHIVO ES DEL DESARROLLADOR DE FRONTEND.

   Portado de plantilla-comercio-exterior/assets/css/estilos.css. Todo lo que
   esta hasta la marca "AGREGADO AL PORTAR" es el prototipo tal cual, para que
   se pueda comparar con el original linea por linea. Lo de abajo lo agrego el
   backend al armar el sistema de layouts, y es lo unico que conviene revisar.

   Los colores se definen como variables CSS en :root. No hay tema oscuro.
   ============================================================= */

:root {
  --ce-azul: #22406b;
  --ce-azul-oscuro: #16283f;
  --ce-azul-claro: #eaf0f8;
  --ce-teal: #159f9b;
  --ce-ambar: #e0a52b;
  --ce-rojo: #c0453a;
  --ce-verde: #2e8b57;
  --ce-morado: #7a53b3;

  --ce-fondo: #f6f8fb;
  --ce-superficie: #ffffff;
  --ce-texto: #1e2c40;
  --ce-texto-suave: #64748b;
  --ce-borde: #dfe5ee;
  --ce-radio: 10px;
  --ce-sombra: 0 1px 2px rgba(22, 40, 63, .06), 0 8px 24px rgba(22, 40, 63, .05);

  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background-color: var(--ce-fondo);
  color: var(--ce-texto);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .fuente-titulo {
  font-family: "Sora", system-ui, sans-serif;
  letter-spacing: -.02em;
  font-weight: 600;
}

.tabular { font-variant-numeric: tabular-nums; }
.texto-suave { color: var(--ce-texto-suave); }
.etiqueta-mini {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  color: var(--ce-texto-suave);
}

/* ---------- Botones y colores utilitarios ---------- */
.btn-principal {
  background-color: var(--ce-azul);
  border-color: var(--ce-azul);
  color: #fff;
}
.btn-principal:hover, .btn-principal:focus {
  background-color: var(--ce-azul-oscuro);
  border-color: var(--ce-azul-oscuro);
  color: #fff;
}
.btn-contorno {
  border-color: var(--ce-borde);
  color: var(--ce-texto);
  background-color: #fff;
}
.btn-contorno:hover { border-color: var(--ce-azul); color: var(--ce-azul); }
.texto-teal { color: var(--ce-teal); }
.texto-positivo { color: var(--ce-verde); }
.texto-negativo { color: var(--ce-rojo); }
.fondo-suave { background-color: var(--ce-azul-claro); }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--ce-superficie);
  border: 1px solid var(--ce-borde);
  border-radius: var(--ce-radio);
  box-shadow: var(--ce-sombra);
}
.tarjeta-kpi .valor {
  font-family: "Sora", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
}
.icono-cuadro {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--ce-azul-claro);
  color: var(--ce-azul);
}

/* ---------- Encabezado ---------- */
.barra-superior {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ce-borde);
}
.marca-logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ce-azul), var(--ce-teal));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: .85rem;
}
.navbar-nav .nav-link { color: var(--ce-texto-suave); font-weight: 500; font-size: .93rem; }
.navbar-nav .nav-link:hover { color: var(--ce-azul); }
.navbar-nav .nav-link.activo { color: var(--ce-azul); font-weight: 600; }

/* ---------- Portada ---------- */
.portada {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(21, 159, 155, .16), transparent),
    linear-gradient(180deg, #fff, var(--ce-fondo));
  border-bottom: 1px solid var(--ce-borde);
}
.malla-lineas {
  background-image:
    linear-gradient(to right, var(--ce-borde) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ce-borde) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .5;
}

/* ---------- Pasos del constructor ---------- */
.pasos { display: flex; gap: .5rem; flex-wrap: wrap; }
.paso {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid var(--ce-borde);
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  color: var(--ce-texto-suave);
}
.paso .numero {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ce-azul-claro); color: var(--ce-azul);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700;
}
.paso.activo { border-color: var(--ce-azul); color: var(--ce-azul); font-weight: 600; }
.paso.activo .numero { background: var(--ce-azul); color: #fff; }
.paso.completo .numero { background: var(--ce-verde); color: #fff; }

/* ---------- Chips de filtros ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--ce-borde);
  background: #fff;
  font-size: .8rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--ce-azul); }
.chip.seleccionado {
  background: var(--ce-azul);
  border-color: var(--ce-azul);
  color: #fff;
}
.chip .quitar { font-weight: 700; opacity: .8; }

/* ---------- Tarjetas de análisis ---------- */
.tarjeta-analisis { cursor: pointer; transition: border-color .15s, transform .15s; }
.tarjeta-analisis:hover { transform: translateY(-2px); border-color: var(--ce-teal); }
.tarjeta-analisis.seleccionada { border-color: var(--ce-azul); box-shadow: 0 0 0 2px rgba(34,64,107,.15); }

/* ---------- Tablas ---------- */
.tabla-reporte thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ce-texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.tabla-reporte tbody td { font-size: .88rem; white-space: nowrap; }

/* ---------- Chat ---------- */
.chat-panel { display: flex; flex-direction: column; height: 520px; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 1rem; }
.burbuja {
  max-width: 85%;
  padding: .6rem .8rem;
  border-radius: 12px;
  font-size: .88rem;
  margin-bottom: .6rem;
  line-height: 1.5;
}
.burbuja.usuario { background: var(--ce-azul); color: #fff; margin-left: auto; }
.burbuja.sistema { background: var(--ce-azul-claro); color: var(--ce-texto); }

/* ---------- Estados ---------- */
.estado { font-size: .72rem; padding: .18rem .5rem; border-radius: 999px; font-weight: 600; }
.estado.listo { background: rgba(46,139,87,.12); color: var(--ce-verde); }
.estado.proceso { background: rgba(224,165,43,.16); color: #96700f; }
.estado.error { background: rgba(192,69,58,.12); color: var(--ce-rojo); }

/* ---------- Planes ---------- */
.tarjeta-plan.destacada { border-color: var(--ce-azul); box-shadow: 0 0 0 3px rgba(34,64,107,.1); }
.cinta-plan {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--ce-azul); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: .2rem .7rem; border-radius: 999px; text-transform: uppercase;
}

/* ---------- Donaciones ---------- */
.qr-marco {
  width: 210px; height: 210px;
  border: 2px dashed var(--ce-borde);
  border-radius: var(--ce-radio);
  display: flex; align-items: center; justify-content: center;
  color: var(--ce-texto-suave);
  font-size: .8rem; text-align: center; padding: 1rem;
  background: #fff;
}

/* ---------- Pie ---------- */
.pie {
  background: var(--ce-azul-oscuro);
  color: rgba(255,255,255,.78);
}
.pie a { color: rgba(255,255,255,.78); text-decoration: none; }
.pie a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .tarjeta-kpi .valor { font-size: 1.15rem; }
  .chat-panel { height: 440px; }
}

/* Botón claro sobre el pie oscuro */
.pie a.btn-light, .pie .btn-light { color: var(--ce-azul) !important; background: #fff; }

/* Estado marcado de los botones tipo radio */
.btn-check:checked + .btn-contorno,
.btn-check:active + .btn-contorno {
  background-color: var(--ce-azul);
  border-color: var(--ce-azul);
  color: #fff;
}


/* =============================================================
   AGREGADO AL PORTAR EL PROTOTIPO AL MONOLITO PHP
   =============================================================

   Dos grupos, con motivos distintos:

   1. Reemplazos de style="...". La CSP de produccion es default-src 'self' y
      no admite atributos style, asi que las alturas, los anchos y los colores
      que el prototipo llevaba en linea viven aca. Cada clase dice que
      reemplaza, para poder rastrearlo hasta el original.

   2. El panel de administracion. Esto NO sale del prototipo: el prototipo no
      tiene sidebar ni area de admin. Se construye sobre los mismos tokens
      --ce-* para que no parezca otro producto.
   ============================================================= */

/* ---------- Lienzos de grafico ----------
   Reemplazan style="height:NNNpx" en los <canvas>. Chart.js necesita que el
   contenedor tenga altura: sin esto el grafico colapsa a cero. */
.lienzo-grafico { position: relative; height: 280px; }
.lienzo-grafico.compacto { height: 260px; }
.lienzo-grafico.mini { height: 220px; }

/* ---------- Piezas que el marcado ya usaba y no existian ----------
   partials/nav.php:41 usa marca-nombre desde M1.5. Viene de app.js:78, donde
   era style="font-size:.98rem". */
.marca-nombre { font-size: .98rem; }

/* ---------- Reemplazos de style= ----------
   columna-pegajosa: el aside de consulta y el chat de reporte, style="top:88px".
   El 88 es la altura de la barra superior; si cambia, cambia aca.
   ancho-buscador: el buscador de mis-consultas (240px) y el de App.tabla (220px),
   unificados en uno.
   ancho-lectura: el encabezado centrado de planes, style="max-width:680px".
   barra-creditos: la barra de progreso del panel, height:8px + relleno teal. */
.columna-pegajosa { position: sticky; top: 88px; }
.ancho-buscador { max-width: 240px; }
.ancho-lectura { max-width: 680px; }
.barra-creditos { height: 8px; }
.barra-creditos .progress-bar { background-color: var(--ce-teal); }

/* =============================================================
   Panel de administracion
   =============================================================

   Barra superior oscura de ancho completo, sidebar de 260px y contenido.
   El sidebar es un offcanvas responsivo de Bootstrap: por debajo de lg se
   abre desde la barra, y en lg y arriba queda fijo en el flujo. Es Bootstrap
   nativo con data-bs-toggle, sin una linea de JavaScript propio, que es lo
   que la CSP obliga.
   ============================================================= */

.cuerpo-admin { background-color: var(--ce-fondo); }

.barra-admin {
  background: var(--ce-azul-oscuro);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.barra-admin a { color: #fff; text-decoration: none; }
.barra-admin .etiqueta-mini { color: rgba(255, 255, 255, .6); }
.barra-admin .marca-logo { background: linear-gradient(135deg, var(--ce-teal), var(--ce-ambar)); }

.disposicion-admin { display: flex; align-items: stretch; }

.admin-menu {
  --bs-offcanvas-width: 280px;
  flex: 0 0 260px;
  width: 260px;
  background: var(--ce-superficie);
  border-right: 1px solid var(--ce-borde);
  padding: 1.15rem .8rem;
}

.admin-menu-rotulo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--ce-texto-suave);
  padding: 0 .7rem;
  margin: 1.1rem 0 .4rem;
}
.admin-menu-rotulo:first-child { margin-top: 0; }

.admin-menu-enlace {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .52rem .7rem;
  border-radius: 8px;
  color: var(--ce-texto-suave);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.admin-menu-enlace:hover { background: var(--ce-azul-claro); color: var(--ce-azul); }
.admin-menu-enlace.activo { background: var(--ce-azul); color: #fff; font-weight: 600; }

.admin-contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.75rem;
}

.admin-pie {
  border-top: 1px solid var(--ce-borde);
  background: var(--ce-superficie);
  color: var(--ce-texto-suave);
  font-size: .82rem;
}

/* Por debajo de lg el sidebar es un cajon: el ancho lo maneja Bootstrap con
   --bs-offcanvas-width y el flex-basis fijo estorbaria. */
@media (max-width: 991.98px) {
  .admin-menu { flex-basis: auto; width: auto; }
  .admin-contenido { padding: 1.15rem; }
}

/* ---------- Salto al contenido ----------
   Primer elemento enfocable de los dos layouts. Invisible hasta que recibe el
   foco: quien navega con teclado no tiene que recorrer el menu entero en cada
   pagina. */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ce-azul);
  color: #fff;
  padding: .5rem .85rem;
  border-radius: 8px;
  text-decoration: none;
}
.salto-contenido:focus { left: .5rem; top: .5rem; }

/* ---------- Aviso breve (toast) ----------
   Reemplaza el style="background:..." que App.aviso construia a mano. */
.toast.aviso { background-color: var(--ce-azul); }
.toast.aviso.error { background-color: var(--ce-rojo); }

/* Las celdas de texto de la tabla del reporte se parten en lineas: con
   nowrap, una descripcion NANDINA larga empujaba las cifras fuera de la
   pantalla (D-60). Las numericas siguen sin partirse. */
.tabla-reporte tbody td.celda-texto { white-space: normal; min-width: 14rem; }