/*
 * Hub Colombian Origin — modo claro único, como el panel de Gramor.
 *
 * Colores tomados de colombianorigin.eu: tinta casi negra (#03080f → aquí
 * #0b1a24, un poco más cálida) y el verde de marca #37BF91.
 * El verde de marca NO sirve como fondo de botón con texto blanco (2.4:1),
 * así que la acción usa un verde profundo (#17684d, 6.6:1 sobre blanco).
 * El de marca queda para detalles: subrayados, bordes, la barra activa.
 *
 * Trampas del panel que aquí se evitan a propósito:
 *  · .btn permite saltos de línea: un texto largo no se sale del botón.
 *  · en rejillas estrechas todo lleva min-width: 0.
 *  · sin estilos en línea: la política CSP del hub los bloquea.
 */
:root {
  --tinta: #0b1a24;
  --tinta-suave: #1d3140;
  --marca: #37bf91;
  --accion: #17684d;
  --accion-hover: #11533d;
  --lienzo: #eef1ec;
  --superficie: #fbfaf6;
  --superficie-2: #f2f4ef;
  --texto: #1c2521;
  --texto-2: #4a5751;
  --borde: #d3dad2;
  --ok-fondo: #e3f4ec;  --ok-borde: #9fd6bd;  --ok-texto: #14553f;
  --espera-fondo: #fff5de; --espera-borde: #e6c47c; --espera-texto: #614610;
  --error-fondo: #fcebe8; --error-borde: #e8a79c; --error-texto: #8a2418;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(11, 26, 36, .08), 0 4px 14px rgba(11, 26, 36, .06);
  --fuente: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accion); font-weight: 600; }
a:hover { color: var(--accion-hover); }
h1, h2 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
p { margin: 0 0 10px; }

/* ---------- Barra superior ---------- */
.barra {
  background: var(--tinta);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 10px 24px;
  border-bottom: 3px solid var(--marca);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .01em;
}
.marca:hover { color: #fff; }
.marca strong { color: var(--marca); font-weight: 700; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a {
  color: #d9e4e0;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  padding: 6px 12px;
  border-radius: 999px;
}
.menu a:hover { background: var(--tinta-suave); color: #fff; }
.menu a.activa { background: var(--tinta-suave); color: #fff; box-shadow: inset 0 -2px 0 var(--marca); }
.contador {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--marca);
  color: var(--tinta);
  font-size: .78rem;
  text-align: center;
}

/* ---------- Contenido ---------- */
.contenido {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 40px;
}
.titulo-pagina { margin-bottom: 18px; }
.subtitulo { margin-top: 32px; }
.texto-suave { color: var(--texto-2); }
.opcional { color: var(--texto-2); font-weight: 400; font-size: .85em; }

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--borde);
  color: var(--texto-2);
  font-size: .85rem;
}

/* ---------- Tarjetas y rejillas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  min-width: 0;
}
.tarjeta-enlace { display: block; color: var(--texto); text-decoration: none; font-weight: 400; border-top: 3px solid var(--marca); }
.tarjeta-enlace:hover { color: var(--texto); border-color: var(--accion); }
.tarjeta-apagada { opacity: .7; }
.tarjeta-proximo { margin-top: 24px; }
.tarjeta-proximo ul { margin: 0; padding-left: 20px; }
.cifra { font-size: 2.2rem; font-weight: 700; color: var(--accion); margin: 0; }

.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lista-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.etiqueta {
  font-size: .75rem;
  font-weight: 600;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}

.datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0 0 14px;
}
.datos dt { color: var(--texto-2); font-size: .88rem; }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.mensaje {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 3px solid var(--marca);
  background: var(--superficie-2);
  overflow-wrap: anywhere;
}

.actividad { list-style: none; padding: 0; margin: 0; }
.actividad li { padding: 8px 0; border-bottom: 1px solid var(--borde); }

/* ---------- Avisos ---------- */
.aviso {
  border: 1px solid;
  border-radius: var(--radio);
  padding: 12px 16px;
  margin: 0 0 16px;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.aviso-espera { background: var(--espera-fondo); border-color: var(--espera-borde); color: var(--espera-texto); }
.aviso-error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error-texto); }
.aviso a { color: inherit; }
.aviso-con-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.aviso-con-accion p { margin: 0; flex: 1 1 260px; }
.aviso-con-accion form { margin: 0; }

/* ---------- Formularios y botones ---------- */
.formulario { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0 0 12px; }
.formulario label { font-weight: 600; font-size: .9rem; margin-top: 6px; }
.formulario button { margin-top: 12px; align-self: flex-start; }
.formulario-linea button { align-self: flex-start; }
input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 9px 12px;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 1px;
}
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; margin: 10px 0 4px; }
legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; margin: 6px 0 0; }
.opcion input { margin-top: 5px; flex: none; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-principal { background: var(--accion); color: #fff; }
.btn-principal:hover { background: var(--accion-hover); color: #fff; }
.btn-secundario { background: var(--superficie); color: var(--accion); border-color: var(--accion); }
.btn-secundario:hover { background: var(--ok-fondo); }
.btn-peligro { background: var(--superficie); color: var(--error-texto); border-color: var(--error-borde); }
.btn-peligro:hover { background: var(--error-fondo); }
.btn-ancho { width: 100%; align-self: stretch !important; }

.rechazo { margin-top: 6px; }
.rechazo summary { cursor: pointer; color: var(--texto-2); font-weight: 600; font-size: .9rem; }

/* ---------- Tablas ---------- */
.tabla-envoltorio { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--superficie-2); font-size: .85rem; }

/* ---------- Pantallas de acceso ---------- */
.pantalla-acceso { justify-content: center; align-items: center; padding: 24px 16px; background: var(--tinta); }
.caja-acceso {
  width: 100%;
  max-width: 460px;
  background: var(--superficie);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.cabecera-acceso {
  background: var(--tinta-suave);
  color: #d9e4e0;
  text-align: center;
  padding: 22px 16px 14px;
  border-bottom: 3px solid var(--marca);
}
.cabecera-acceso p { margin: 8px 0 0; font-size: .9rem; letter-spacing: .03em; }
.cuerpo-acceso { padding: 24px 28px 20px; }
.nota-centrada { text-align: center; font-size: .9rem; margin-top: 14px; }

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  .barra { padding: 10px 16px; }
  .contenido { padding: 20px 16px 32px; }
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .cuerpo-acceso { padding: 20px 18px 16px; }
  .datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .datos dd { margin-bottom: 6px; }
}

/* ---------- v0.2 · Empresas ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.pestanas a {
  text-decoration: none;
  color: var(--texto-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .9rem;
}
.pestanas a.activa { background: var(--accion); border-color: var(--accion); color: #fff; }
.pestanas .cuenta { font-weight: 700; margin-left: 2px; }
.tarjeta-garantia { border-left: 4px solid var(--marca); margin-bottom: 16px; }
.tarjeta-empresa { margin-bottom: 16px; }
.formulario .tarjeta { margin-bottom: 16px; }
.formulario .rejilla-2 .tarjeta { margin-bottom: 0; }
.formulario > .rejilla-2 { margin-bottom: 16px; }
section.tarjeta + section.tarjeta, section.tarjeta + form, form + .rejilla-2 { margin-top: 16px; }
.etiqueta-socia { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.btn-chico { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.lista-simple { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-simple li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-simple li > span { min-width: 0; overflow-wrap: anywhere; }
.lista-simple form { margin: 0; }
.ayuda { color: var(--texto-2); font-size: .85rem; margin: 2px 0 6px; }
select:disabled { background: var(--superficie-2); color: var(--texto-2); }
/* Campo trampa del formulario público: fuera de la vista, sin display:none
   (algunos programas lo detectan y lo saltan). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Dentro de tarjetas (que no son flex) la etiqueta es en línea y su margen
   superior no se aplica: se hace bloque para separar cada campo. */
.formulario label:not(.opcion) { display: block; }
.formulario .tarjeta input, .formulario .tarjeta select, .formulario .tarjeta textarea { margin-top: 4px; }
/* En una rejilla las tarjetas ya están separadas por el gap. */
.rejilla-2 > .tarjeta + .tarjeta { margin-top: 0; }

.barra-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.barra-acciones p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.barra-acciones form { margin: 0; }
.tarjeta-estrecha { max-width: 560px; }

/* ---------- v0.3 · Certámenes ---------- */
h3 { font-size: 1rem; margin: 18px 0 8px; line-height: 1.3; }
.tarjeta > h3:first-child, .tarjeta-plaza h3 { margin-top: 0; }
.subtitulo-cerca { margin-top: 8px; }
input[type=date], input[type=number] {
  width: 100%; min-width: 0; font: inherit; color: var(--texto); background: #fff;
  border: 1px solid var(--borde); border-radius: 8px; padding: 9px 12px;
}
.lista-turno { margin: 0 0 12px; padding-left: 20px; }
.lista-turno li { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-turno li > span { display: block; overflow-wrap: anywhere; }
.lista-turno form { margin: 4px 0 0; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.botones-fila form { margin: 0; }
.tarjeta-plaza { box-shadow: none; }
.lista-simple li > .texto-suave { flex-basis: 100%; }