/* Paleta oficial AGUNSA/PIL (aplicada 2026-09-19). Los colores se tomaron
   directamente de los sitios reales (agunsa.com y pilship.com) y de los
   logos que envio Rodrigo, no son un placeholder aproximado:
     - Azul marino: el mismo que usa pilship.com como color de texto/marca (#04246a).
     - Azul PIL: el azul del logo/sitio de PIL (#0072bc).
     - Rojo: el rojo que comparten los logos de AGUNSA y PIL (~#d9291c / #ed1c24
       -- son casi identicos, se uso el de AGUNSA para el rojo de "no liberado"
       porque AGUNSA es quien opera el portal).
   Todo el archivo referencia estas variables, asi que un ajuste de marca a
   futuro es cuestion de cambiar los valores aqui. */
:root {
  --color-primary: #04246a;
  --color-primary-dark: #021a4d;
  --color-accent: #0072bc;
  --color-bg: #f3f4f0;
  --color-card: #ffffff;
  --color-text: #1a2733;
  --color-text-muted: #5b6b78;
  --color-border: #dde3e8;
  --color-verde: #1a8a4a;
  --color-verde-bg: #e6f6ec;
  --color-rojo: #d9291c;
  --color-rojo-bg: #fbe9e7;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

header.portal-header {
  background: var(--color-primary);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.logo-lockup img.logo-agunsa {
  height: 34px;
  width: auto;
  display: block;
}

.logo-lockup .logo-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
}

/* El logo de PIL trae sus propios colores (azul/rojo) sobre fondo transparente;
   una chapa blanca detras asegura que se lean correctos sobre el azul marino
   del header, en vez de perder contraste. */
.logo-lockup .logo-pil-chip {
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
}

.logo-lockup img.logo-pil {
  height: 20px;
  width: auto;
  display: block;
}

.portal-header h1 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.portal-header p {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.buscador {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 20px;
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.buscador input[type="text"] {
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 15px;
}

.buscador input[type="text"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.buscador button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.buscador button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.buscador button:not(:disabled):hover {
  background: var(--color-primary-dark);
}

.estado {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 0;
  font-size: 14px;
}

.estado.error {
  color: var(--color-rojo);
}

.resultado-card {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 24px;
  margin-bottom: 20px;
}

.resultado-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.resultado-header h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.resultado-header .subtitulo {
  color: var(--color-text-muted);
  font-size: 13px;
}

.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.semaforo.verde {
  background: var(--color-verde-bg);
  color: var(--color-verde);
}

.semaforo.rojo {
  background: var(--color-rojo-bg);
  color: var(--color-rojo);
}

.semaforo .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.grid-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
}

.dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dato .etiqueta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}

.dato .valor {
  font-size: 15px;
  font-weight: 500;
}

.aviso-pendiente {
  background: #fff7e6;
  color: #8a5a00;
  border: 1px solid #f2d38a;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.manifiesto-seccion {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.manifiesto-seccion h3 {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

table.tabla-manifiesto {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.tabla-manifiesto th,
table.tabla-manifiesto td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}

table.tabla-manifiesto th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

footer.portal-footer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 20px;
}