/* ==========================================================================
   MUNDO VISA TOURS - Panel administrativo
   Se carga despues de app.css y reutiliza sus tokens, botones y campos.

   El menu lateral se abre y cierra con una casilla oculta (:checked), sin
   depender de JavaScript.
   ========================================================================== */

.admin-body{background:var(--c-bg)}

.admin{display:flex;min-height:100vh}

/* ------------------------------------------------------------ menu lateral */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}

.sidebar{
  position:fixed;inset:0 auto 0 0;z-index:40;width:255px;
  display:flex;flex-direction:column;
  background:var(--c-dark);color:rgba(255,255,255,.8);
  transform:translateX(-100%);transition:transform .22s ease;
  overflow-y:auto;
}
.nav-toggle:checked ~ .admin .sidebar{transform:translateX(0);box-shadow:var(--shadow-lg)}

.nav-backdrop{
  position:fixed;inset:0;z-index:35;background:rgba(6,20,34,.55);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.nav-toggle:checked ~ .admin .nav-backdrop{opacity:1;pointer-events:auto}

.sidebar__brand{
  display:flex;align-items:center;gap:10px;padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar__brand img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;padding:3px}
.sidebar__mark{
  width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;font-weight:800;font-size:13px;
}
.sidebar__name{
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;line-height:1.3;
}

.sidebar__nav{flex:1;padding:12px 10px}
.sidebar__nav ul{display:grid;gap:3px}

.sidebar__link{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 12px;border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;color:rgba(255,255,255,.76);
  background:none;border:0;cursor:pointer;text-align:left;
  transition:background-color .15s ease,color .15s ease;
}
.sidebar__link:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.sidebar__link.is-active{
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.sidebar__link .icon{width:19px;height:19px}
.sidebar__link--danger{color:#ffb4a8}
.sidebar__link--danger:hover{background:rgba(192,57,43,.22);color:#ffd7cf}

.sidebar__foot{padding:12px 10px 18px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:3px}
.sidebar__version{font-size:11px;color:rgba(255,255,255,.35);padding:6px 12px 0;letter-spacing:.6px}

/* ----------------------------------------------------------- zona central */
.admin__main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:25;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;min-height:66px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-border);
}
.topbar__burger{
  display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:var(--radius-sm);border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-dark);cursor:pointer;
}
.topbar__burger .icon{width:22px;height:22px}
.topbar__title{flex:1;min-width:0}
.topbar__title h1{font-size:18px;font-weight:800;color:var(--c-dark);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__title p{font-size:13px;color:var(--c-muted)}
.topbar__right{display:flex;align-items:center;gap:10px}
.topbar__public{display:none;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--c-muted)}
.topbar__public:hover{color:var(--c-primary)}
.topbar__user{display:flex;align-items:center;gap:9px}
.topbar__avatar{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;font-weight:800;font-size:15px;
}
.topbar__user-info{display:none;flex-direction:column;line-height:1.25}
.topbar__user-info strong{font-size:14px;color:var(--c-dark)}
.topbar__user-info small{font-size:12px;color:var(--c-muted)}

.panel{flex:1;padding:18px 16px 40px;max-width:1280px;width:100%;margin:0 auto}
.panel-footer{padding:14px 16px 22px;text-align:center}
.panel-footer p{font-size:12px;color:var(--c-muted)}

.page-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}

/* ------------------------------------------------------------- estadisticas */
.stat-grid{display:grid;gap:12px;margin-bottom:18px;grid-template-columns:repeat(2,1fr)}
.stat{
  border-radius:var(--radius);padding:16px;color:#fff;display:grid;gap:4px;
  box-shadow:var(--shadow-sm);min-width:0;
}
.stat--primary{background:linear-gradient(140deg,var(--c-primary),#14709f)}
.stat--secondary{background:linear-gradient(140deg,var(--c-secondary),#0b8792)}
.stat--accent{background:linear-gradient(140deg,var(--c-accent),#D94E06);color:#fff}
.stat--dark{background:linear-gradient(140deg,var(--c-dark),#173a58)}
.stat__label{font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;opacity:.85}
.stat__value{font-size:clamp(24px,6vw,32px);font-weight:800;line-height:1.1}
.stat__meta{font-size:12.5px;opacity:.82}
.stat__link{font-size:13px;font-weight:700;color:inherit;opacity:.92}
.stat__link:hover{opacity:1}
.stat--wide{grid-column:1 / -1}
.stat-grid--compact .stat{padding:14px}

.bucket-list{display:grid;gap:5px;margin-top:6px}
.bucket-list li{display:flex;justify-content:space-between;font-size:13.5px;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.14)}
.bucket-list li:last-child{border-bottom:0}

/* ------------------------------------------------------------------ grafico */
.chart{display:flex;align-items:flex-end;gap:4px;height:170px;padding-top:18px;overflow-x:auto}
.chart__col{flex:1;min-width:26px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:6px}
.chart__bar{
  width:100%;max-width:34px;border-radius:6px 6px 2px 2px;position:relative;
  background:linear-gradient(180deg,var(--c-secondary),var(--c-primary));min-height:3px;
}
.chart__value{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:var(--c-dark);font-style:normal;
}
.chart__label{font-size:10.5px;color:var(--c-muted);white-space:nowrap}

/* -------------------------------------------------------------- dos columnas */
.two-cols{display:grid;gap:16px}

.mini-list{display:grid;gap:2px}
.mini-list li a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 10px;border-radius:var(--radius-sm);color:inherit;
}
.mini-list li a:hover{background:#f4f8fb;text-decoration:none}
.mini-list__main{display:flex;flex-direction:column;min-width:0}
.mini-list__main strong{font-size:14.5px;color:var(--c-dark);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mini-list__main small{font-size:12.5px;color:var(--c-muted)}
.mini-list__side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.mini-list__side small{font-size:11.5px;color:var(--c-muted)}

/* -------------------------------------------------------------------- filtros */
.filters{padding:16px}
.filters__grid{display:grid;gap:12px;grid-template-columns:1fr}
.filters__grid .field{margin-bottom:0}
.filters__actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--c-border);
}
.filters__submit{display:flex;align-items:flex-end}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;
}
.toolbar__count{font-size:14px;color:var(--c-muted)}
.toolbar__actions{display:flex;gap:8px;flex-wrap:wrap}

/* --------------------------------------------------------------------- tablas
   En movil cada fila se convierte en una tarjeta con la etiqueta del campo
   delante del valor (atributo data-label de cada celda).                    */
.card--table{padding:16px 0}
.card--table .card__head{padding:0 16px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.table{font-size:14px;min-width:100%}
.table thead{display:none}
.table tbody tr{
  display:block;border:1px solid var(--c-border);border-radius:var(--radius);
  padding:12px;margin:0 16px 10px;background:var(--c-surface);
}
.table tbody tr.is-annulled{opacity:.62;background:#fbfbfc}
.table td{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:5px 0;border:0;text-align:right;
}
.table td::before{
  content:attr(data-label);font-size:12px;font-weight:700;color:var(--c-muted);
  text-align:left;flex:0 0 40%;text-transform:uppercase;letter-spacing:.4px;
}
.table td small{display:block;font-size:12px;color:var(--c-muted)}
.table__strong{font-weight:700;color:var(--c-dark)}
.table__stack{display:flex;flex-direction:column;align-items:flex-end}

.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.row-actions form{display:inline}

/* ------------------------------------------------- candado por fila ------
   La fila llega bloqueada: hay que marcar la casilla para habilitar sus
   acciones. Asi no se pulsa "Eliminar" de la fila equivocada por error.    */
.lock-col{width:44px;text-align:center}

.row-lock{display:inline-flex;align-items:center;cursor:pointer}
.row-lock input{position:absolute;opacity:0;width:0;height:0}
.row-lock__box{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  border:2px solid var(--c-border);background:var(--c-surface);
  transition:background-color .15s ease,border-color .15s ease;
}
.row-lock__box::after{
  content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:-2px;
}
.row-lock input:checked + .row-lock__box{background:var(--c-accent);border-color:var(--c-accent)}
.row-lock input:checked + .row-lock__box::after{transform:rotate(-45deg) scale(1)}
.row-lock input:focus-visible + .row-lock__box{outline:3px solid var(--c-secondary);outline-offset:2px}

/* Estado bloqueado de la fila */
tr.is-locked [data-needs-unlock]{opacity:.38;pointer-events:none}
tr.is-locked .delete-form__key{visibility:hidden}
tr.is-locked:hover{background:transparent}

/* Celda del enlace para compartir: codigo + boton copiar, siempre a la vista
   porque es lo que mas se usa del listado de viajes. */
.share-cell{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.delete-form{display:inline-flex;gap:6px;align-items:center}
.delete-form__key{
  width:135px;padding:6px 10px;font-size:13px;font-family:inherit;
  border:1.5px solid var(--c-error);border-radius:6px;background:#fffafa;min-height:32px;
}
.delete-form__key:focus{outline:none;box-shadow:0 0 0 3px rgba(192,57,43,.15)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------ badges */
.badge{
  display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;
  border-radius:999px;letter-spacing:.3px;white-space:nowrap;
}
.badge--activo,.badge--open{background:var(--c-success-bg);color:var(--c-success)}
/* Estado del pasajero: se lee de un golpe en la relacion. Azul mientras solo
   esta registrado, naranja de marca cuando ya esta confirmado. */
.badge--registrado{background:var(--c-primary);color:#fff}
.badge--confirmado{background:var(--c-accent);color:#fff}
.badge--inactivo,.badge--muted{background:#eef2f6;color:var(--c-muted)}
.badge--finalizado{background:#efe9f8;color:#5b3fa0}
.badge--anulado{background:var(--c-error-bg);color:var(--c-error)}
.badge--plain{background:#eef2f6;color:var(--c-dark)}

/* -------------------------------------------------------------- paginacion */
.pagination{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:6px 0 20px;
}
.pagination__info{font-size:13.5px;color:var(--c-muted)}
.pagination__list{display:flex;gap:5px;flex-wrap:wrap}
.pagination__link{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;
  border-radius:var(--radius-sm);border:1px solid var(--c-border);
  background:var(--c-surface);font-size:14px;font-weight:700;color:var(--c-primary);
}
.pagination__link:hover{border-color:var(--c-primary);text-decoration:none}
.pagination__link.is-current{
  background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}
.pagination__link.is-disabled{opacity:.4;color:var(--c-muted)}
.pagination__gap{display:grid;place-items:center;min-width:24px;height:40px;color:var(--c-muted)}

/* ------------------------------------------------------------ formularios */
.form-grid{display:grid;gap:14px;grid-template-columns:1fr}
.form-grid .field{margin-bottom:0}
.field--wide{grid-column:1 / -1}
.form-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--c-border);
}
.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{margin-bottom:0;min-width:200px}

.sticky-actions{
  position:sticky;bottom:0;z-index:15;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border:1px solid var(--c-border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;box-shadow:var(--shadow);
}

.color-field{display:flex;gap:8px;align-items:center}
.color-field input[type="color"]{
  width:52px;height:50px;padding:0;border:1.5px solid var(--c-border);
  border-radius:var(--radius-sm);background:none;cursor:pointer;flex:0 0 auto;
}

.image-preview{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden;
  background:#f7fafc;display:grid;place-items:center;padding:10px;position:relative;
}
.image-preview img{max-height:130px;width:auto;object-fit:contain}
.image-preview--small img{max-height:80px}
.image-preview--empty{min-height:92px;color:var(--c-muted);font-size:13px;border-style:dashed}
.image-preview__note{font-size:12px;color:var(--c-muted)}

.image-grid{display:grid;gap:14px;grid-template-columns:1fr}
.image-card{
  border:1px solid var(--c-border);border-radius:var(--radius);padding:14px;
  display:grid;gap:9px;align-content:start;
}
.image-card__title{font-size:14px;font-weight:700;color:var(--c-dark)}
.image-card form{display:grid;gap:8px}
.image-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}

/* ----------------------------------------------------------- ficha pasajero */
.passenger-card__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--c-border);
}
.passenger-card__label{font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--c-muted)}
.passenger-card__code{
  font-size:24px;font-weight:800;letter-spacing:1.5px;color:var(--c-primary);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.passenger-card__name{font-size:20px;font-weight:800;color:var(--c-dark);margin:14px 0 16px}

.data-grid{display:grid;gap:1px;background:var(--c-border);
  border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.data-grid > div{background:var(--c-surface);padding:12px 14px}
.data-grid dt{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted)}
.data-grid dd{font-size:15px;font-weight:600;color:var(--c-dark);margin-top:3px}
.data-grid dd small{display:block;font-size:12px;font-weight:500;color:var(--c-muted)}

.note-box{background:#fffdf5;border:1px solid #f0e4c8;border-radius:var(--radius-sm);
  padding:14px;margin-top:14px}
.note-box__label{font-size:11.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--c-warning);margin-bottom:4px}

/* --------------------------------------------------------------- viaje ficha */
.trip-detail__head{display:grid;gap:16px}
.trip-detail__image{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);
}
.trip-detail__school{font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--c-secondary)}
.trip-detail__name{font-size:22px;font-weight:800;color:var(--c-dark);margin:4px 0 6px}
.trip-detail__date{font-size:14px;font-weight:600;color:var(--c-muted)}
.trip-detail__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

.share{display:grid;gap:16px}
.share__label{font-size:12.5px;font-weight:700;color:var(--c-dark);margin-bottom:6px}
.share__row{display:flex;gap:8px}
.share__row .field__input{font-size:13.5px;min-height:44px}
.share__hint{font-size:12.5px;color:var(--c-muted);margin-top:5px}
.share__actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--c-border)}

/* --------------------------------------------------------------- variados */
.card--danger{border-left:4px solid var(--c-error)}
.card--danger .card__title{color:var(--c-error)}
.card--danger-soft{background:#fffafa;border-color:#f4d7d3}

.empty-state{text-align:center;display:grid;gap:9px;justify-items:center;padding:34px 18px}
.empty-state h3{font-size:16px;font-weight:800;color:var(--c-dark)}
.empty-state p{font-size:14px;color:var(--c-muted);max-width:420px}

.tip-list{display:grid;gap:7px;padding-left:18px;list-style:disc;font-size:14px}
.tip-list li{color:#33566f}

.chip-list{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  background:#eef4f9;border:1px solid var(--c-border);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:600;color:var(--c-dark);
}
.chip small{color:var(--c-muted);font-weight:500;font-size:11.5px;margin-left:4px}

/* Aviso flotante al copiar un enlace */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
  background:var(--c-dark);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:700;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:80;
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

.num{text-align:right}
.actions-col{white-space:nowrap}

/* ============================== TABLET =================================== */
@media (min-width:640px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .filters__grid{grid-template-columns:repeat(2,1fr)}
  .image-grid{grid-template-columns:repeat(2,1fr)}
  .trip-detail__head{grid-template-columns:260px 1fr;align-items:center}
  .data-grid{grid-template-columns:repeat(2,1fr)}
  .panel{padding:22px 24px 46px}
  .topbar{padding:12px 24px}
  .topbar__user-info{display:flex}
}

/* ============================== ESCRITORIO =============================== */
@media (min-width:1024px){
  .sidebar{position:sticky;inset:auto;top:0;height:100vh;transform:none;flex:0 0 255px}
  .nav-backdrop,.topbar__burger{display:none}
  .topbar__public{display:flex}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .stat--wide{grid-column:auto}
  .two-cols{grid-template-columns:1fr 1fr}
  .filters__grid{grid-template-columns:repeat(4,1fr)}
  .image-grid{grid-template-columns:repeat(3,1fr)}
  .data-grid{grid-template-columns:repeat(3,1fr)}

  /* A partir de aqui la tabla vuelve a ser una tabla de verdad. */
  .table thead{display:table-header-group}
  .table tbody tr{
    display:table-row;border:0;border-bottom:1px solid var(--c-border);
    padding:0;margin:0;border-radius:0;
  }
  .table tbody tr:hover{background:#f7fafc}
  .table th{
    text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.7px;
    text-transform:uppercase;color:var(--c-muted);
    padding:10px 12px;border-bottom:2px solid var(--c-border);white-space:nowrap;
  }
  .table th a{color:inherit}
  .table th.num{text-align:right}
  .table td{
    display:table-cell;text-align:left;padding:11px 12px;vertical-align:middle;
  }
  .table td::before{display:none}
  .table td.num{text-align:right}
  .table__stack{align-items:flex-start}
  .table--compact td,.table--compact th{padding:8px 10px;font-size:13.5px}
  .row-actions{justify-content:flex-start}

  /* Relacion de pasajeros: todo centrado bajo su titulo, que es como se lee
     mejor una tabla de datos cortos (DNI, edad, fechas, codigos). */
  .table--center th,
  .table--center td,
  .table--center th.num,
  .table--center td.num{text-align:center}
  .table--center .table__stack{align-items:center}
  .table--center .row-actions{justify-content:center}
  .table--center .inline-select{justify-content:center}
  .table--center .share-cell{justify-content:center}
  .card--table{padding:16px}
  .card--table .card__head{padding:0}
}

/* ============================== IMPRESION ================================ */
@media print{
  .sidebar,.topbar,.panel-footer,.page-actions,.filters,.toolbar,
  .pagination,.sticky-actions,.card--danger,.card--tip,.nav-backdrop{display:none !important}
  .admin{display:block}
  .panel{padding:0}
  .card{box-shadow:none;border:0;padding:0}
  .table thead{display:table-header-group}
  .table tbody tr{display:table-row;border:0;border-bottom:1px solid #ccc;margin:0;padding:0}
  .table td{display:table-cell;text-align:left;padding:5px 7px}
  .table td::before{display:none}
}

/* Dato ya decidido que se muestra sin poder editarse, como el colegio al
   crear un viaje desde la ficha del colegio. */
.fixed-value{
  font-size:17px;font-weight:800;color:var(--c-dark);
  background:#f2f6f9;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);
  padding:13px 14px;
}

/* Separador entre bloques dentro de un mismo formulario largo. */
.form-section{
  margin-top:26px;padding-top:20px;border-top:2px solid var(--c-border);
}

/* Viaje al que corresponde cada fila de Colegios. */
.table__trip{display:block;font-size:12.5px;font-weight:700;color:var(--c-primary)}

/* ------------------------------------------------------- revision interna
   El desplegable de cada fila: pequeno, con el color del estado a la vista
   para poder repasar la relacion de un vistazo. */
.inline-select{display:flex;align-items:center;gap:6px;margin:0}
.field__input--xs{
  padding:5px 26px 5px 8px;font-size:.82rem;font-weight:700;border-radius:8px;
  min-width:118px;background-position:right 6px center;
}
/* La revision se reconoce de un vistazo, sin leer: verde cuando el dato ya
   esta comprobado y rojo cuando hay que corregirlo, los dos con letra blanca
   como las etiquetas de estado. Es el unico sitio del panel con verde, porque
   aqui el color significa "revisado", no marca. */
.review--pendiente{color:#111111;font-weight:800;border-color:#B9C4CF}
.review--correcto{
  color:#FFFFFF;border-color:#0A5C3F;background-color:#0E7A55;font-weight:800;
}
.review--correcto option{color:var(--c-text);background:#fff}
.review--errado{
  color:#FFFFFF;border-color:#9E150B;background-color:#D91B0C;font-weight:800;
}
.review--errado option{color:var(--c-text);background:#fff}

/* Con los dos fondos llenos, la flecha del desplegable va en blanco. */
select.review--errado{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
select.review--correcto{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
select.review--pendiente{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- listas en el mismo grid
   Separador entre listas: cada colegio numera desde PAS-001, asi que verlas
   pegadas confundiria. La fila lleva el colegio y el nombre del viaje. */
.table__group td{
  background:var(--c-info-bg);color:var(--c-primary);
  font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px !important;border-top:2px solid var(--c-primary);text-align:left !important;
}
.table__group-sub{
  display:inline-block;margin-left:10px;color:var(--c-muted);
  font-weight:600;letter-spacing:.02em;text-transform:none;
}

/* ------------------------------------------------- columnas a exportar ----
   Panel plegado: no estorba a quien exporta todo y esta a mano para quien
   necesita una lista con solo dos o tres datos. */
.export-cols{margin:10px 0 0;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface)}
.export-cols summary{
  cursor:pointer;padding:10px 14px;font-weight:700;font-size:13.5px;color:var(--c-primary);
  display:flex;align-items:center;gap:10px;
}
.export-cols summary::marker{color:var(--c-muted)}
.export-cols__count{
  font-weight:600;font-size:12px;color:var(--c-muted);background:var(--c-bg);
  border-radius:999px;padding:2px 10px;
}
.export-cols__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:6px 14px;padding:4px 14px 12px;
}
.export-cols__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 14px 14px;
}
.export-cols__hint{margin:0;font-size:12.5px;color:var(--c-muted)}
.checkbox--sm{font-size:13.5px}
.checkbox--sm input{width:18px;height:18px}