/* Hoja de estilos propia del Panel JY.
   Sin CDN ni frameworks externos: la app corre en una red privada y no debe
   depender de que un servidor de terceros esté disponible (ni contarle a nadie
   de fuera que alguien la está usando). */

:root {
  --tinta: #17202a;
  --tinta-suave: #5b6672;
  --papel: #f5f7fa;
  --tarjeta: #ffffff;
  --borde: #dde3ea;
  --marca: #14507a;
  --marca-clara: #e8f1f8;
  --ok: #1a7f4b;
  --ok-fondo: #e6f5ec;
  --alerta: #b3261e;
  --alerta-fondo: #fdecea;
  --aviso: #8a6100;
  --aviso-fondo: #fdf3d8;
  --radio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.5;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Estructura ---------------------------------------------------------- */
.barra {
  background: var(--marca);
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 54px;
}
.barra a { color: #dce9f3; padding: 16px 2px; display: inline-block; }
.barra a:hover, .barra a.activo { color: #fff; text-decoration: none; border-bottom: 3px solid #fff; }
/* La marca es el logo. El padding es menor que el de los enlaces de texto
   para que el logo, que es mas alto que una linea de texto, no estire la barra
   ni descuadre el subrayado de los demas enlaces. */
.barra .marca { display: flex; align-items: center; padding: 10px 2px; }
.barra .marca:hover { border-bottom-color: transparent; }
.barra .marca img { display: block; height: 34px; width: auto; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.contenido { max-width: 1280px; margin: 24px auto; padding: 0 20px 60px; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 24px 0 10px; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 20px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 18px;
}

.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.kpi { display: block; }
.kpi .etiqueta { color: var(--tinta-suave); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 28px; font-weight: 700; margin-top: 6px; }
.kpi .apoyo { color: var(--tinta-suave); font-size: 13px; }

/* --- Tablas -------------------------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: #f0f4f8; font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: #fafcfe; }
td.numero, th.numero { text-align: right; white-space: nowrap; }
.vacio { text-align: center; color: var(--tinta-suave); padding: 32px 0; }

/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.form-control, .form-select, input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--tinta);
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}
.ayuda { color: var(--tinta-suave); font-size: 13px; margin-top: 3px; }
.errores { color: var(--alerta); font-size: 13px; margin-top: 3px; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

.boton {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--marca);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton:hover { background: #0f3f61; text-decoration: none; color: #fff; }
.boton.secundario { background: #fff; color: var(--marca); }
.boton.secundario:hover { background: var(--marca-clara); color: var(--marca); }
.boton.peligro { background: var(--alerta); border-color: var(--alerta); }
.boton.peligro:hover { background: #8e1e17; }
.boton.pequeno { padding: 4px 10px; font-size: 13px; font-weight: 500; }

/* --- Filtros ------------------------------------------------------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin-bottom: 0; min-width: 150px; }

/* --- Mensajes y estados -------------------------------------------------- */
.mensaje { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; border: 1px solid transparent; }
.mensaje.success { background: var(--ok-fondo); color: var(--ok); border-color: #bfe3cf; }
.mensaje.error { background: var(--alerta-fondo); color: var(--alerta); border-color: #f3c4c0; }
.mensaje.warning { background: var(--aviso-fondo); color: var(--aviso); border-color: #ecd9a3; }
.mensaje.info { background: var(--marca-clara); color: var(--marca); border-color: #c6dcec; }

.etiqueta-estado {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #eef2f6; color: var(--tinta-suave);
}
.cumple { background: var(--ok-fondo); color: var(--ok); }
.no-cumple { background: var(--alerta-fondo); color: var(--alerta); }

/* Salud de la cuenta: el plazo de respuesta y el estado del caso.
   El color lo decide `CasoMarketplace.urgencia`, no la plantilla, para que la
   lista, el detalle y el panel de inicio digan siempre lo mismo. */
.grave { background: var(--alerta-fondo); color: var(--alerta); }
.plazo-vencido { background: var(--alerta-fondo); color: var(--alerta); }
.plazo-urgente { background: var(--alerta-fondo); color: var(--alerta); }
.plazo-pronto { background: var(--aviso-fondo); color: var(--aviso); }
.plazo-holgado { background: var(--ok-fondo); color: var(--ok); }
.estado-abierto, .estado-mas_info { background: var(--aviso-fondo); color: var(--aviso); }
.estado-plan_enviado, .estado-esperando, .estado-apelando { background: var(--marca-clara); color: var(--marca); }
.estado-resuelto_favor { background: var(--ok-fondo); color: var(--ok); }
.estado-resuelto_contra { background: var(--alerta-fondo); color: var(--alerta); }

/* --- Paginación ---------------------------------------------------------- */
.paginacion { display: flex; gap: 8px; align-items: center; margin-top: 16px; color: var(--tinta-suave); }

/* --- Entrar -------------------------------------------------------------- */
.pantalla-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.caja-login { width: 100%; max-width: 400px; }
.caja-login h1 { font-size: 21px; }
/* Solo se centra el logo; el resto de la tarjeta sigue alineado a la izquierda,
   que es como se leen mejor las etiquetas de un formulario. El alto se reserva
   con width/height en el <img> para que la tarjeta no pegue un salto cuando el
   logo termina de cargar. */
.logo-login { display: block; width: 160px; height: auto; margin: 4px auto 18px; }

pre.texto-ocr {
  background: #10161d; color: #d7e2ec; padding: 14px; border-radius: 6px;
  max-height: 320px; overflow: auto; font-size: 12.5px; white-space: pre-wrap;
}

@media (max-width: 700px) {
  .barra { padding: 0 12px; gap: 12px; }
  .barra a { padding: 12px 2px; font-size: 14px; }
  .barra .marca img { height: 26px; }
  .contenido { padding: 0 12px 40px; }
}