/* Analisis de Jugadores de Equipo.
   Movil primero. Los campos van en 17px porque abajo de 16 iOS hace zoom al enfocar.

   Paleta: hueso, blanco y el azul del Japi OS. El hueso es apenas calido (#F7F6F3),
   no amarillo: con el azul se ensuciaria. El degradado navy a azul es el de la linea
   grafica del cuadernillo, el mismo de las barras. */
:root {
  --hueso: #f7f6f3;
  --papel: #ffffff;
  --linea: #e7e4de;
  --linea2: #f0ede7;

  --tinta: #14181f;
  --tinta2: #5c6472;
  --tinta3: #8d95a3;

  --navy: #001344;
  --azul: #0033c4;
  --azul2: #0060fe;
  --azul-suave: #eef2ff;

  --rojo: #a8161d;   --rojo-suave: #fdecec;
  --ambar: #8a5410;  --ambar-suave: #fdf2df;
  --verde: #16643c;  --verde-suave: #e8f4ec;

  --sombra: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --radio: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul2); }

/* --- la barra de arriba --- */
.barra {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 62px;
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none;
         color: var(--tinta); padding: 11px 0; }
.logo {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--navy), var(--azul));
  color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,51,196,.28);
}
.marca b { display: block; font-size: 14.5px; letter-spacing: -.2px;
           line-height: 1.2; white-space: nowrap; }
.marca small { color: var(--tinta3); font-size: 11.5px; letter-spacing: .06em;
               text-transform: uppercase; font-weight: 600; }

.secciones { display: flex; gap: 4px; margin: 0 auto 0 8px; min-width: 0; }
.secciones a {
  color: var(--tinta2); text-decoration: none; font-weight: 600; font-size: 14.5px;
  padding: 9px 13px; border-radius: 9px; white-space: nowrap;
}
.secciones a:hover { background: var(--linea2); color: var(--tinta); }
.secciones a.viva { background: var(--azul-suave); color: var(--azul); }

.quien { display: flex; align-items: center; gap: 14px; font-size: 14px;
         color: var(--tinta2); margin-left: auto; white-space: nowrap; }
.quien a { color: var(--tinta2); text-decoration: none; font-weight: 600; }
.quien a:hover { color: var(--azul); }

/* --- la barra de abajo, solo cuando una seccion tiene partes --- */
.subbarra {
  background: var(--papel); border-bottom: 1px solid var(--linea);
  padding: 0 22px; display: flex; gap: 6px; overflow-x: auto;
}
.subbarra a {
  color: var(--tinta2); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 12px 3px; margin-right: 20px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subbarra a.viva { color: var(--azul); border-bottom-color: var(--azul); }

main { max-width: 1180px; margin: 0 auto; padding: 26px 22px 70px; }
main.angosto { max-width: 780px; }
/* La tabla completa son veintidos columnas: necesita todo el ancho que haya. */
main.ancha { max-width: 1560px; }

/* --- tipografia --- */
h1 { font-size: 26px; letter-spacing: -.5px; margin: 0 0 4px; }
h2 { font-size: 16px; letter-spacing: -.1px; margin: 0 0 10px; }
.ayuda { color: var(--tinta2); font-size: 14.5px; margin: 0 0 18px; }
.sin-margen { margin: 0; }
.bloque { display: block; }
.chico { font-size: 13.5px; }
.encabezado-pagina { margin-bottom: 22px; }

/* --- tarjetas --- */
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 22px; margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.sin-relleno { padding: 0; overflow: hidden; }
.titulo-tarjeta { padding: 20px 22px 0; }
.angosta { max-width: 430px; margin: 8vh auto; }

/* --- formularios --- */
label { display: block; margin: 0 0 15px; font-size: 14px; font-weight: 600; }
input[type=text], input[type=email], input[type=file], textarea, select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 13px;
  font: inherit; font-size: 16px; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 11px; background: var(--papel);
  min-height: 46px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0,51,196,.13);
}
textarea { min-height: 78px; resize: vertical; line-height: 1.5; }

button, .boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 20px; border: 0; border-radius: 11px;
  background: linear-gradient(135deg, var(--azul), var(--azul2));
  color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  text-align: center; text-decoration: none; cursor: pointer; margin: 0;
  box-shadow: 0 1px 2px rgba(0,51,196,.25);
}
button:hover, .boton:hover { filter: brightness(1.12); }
button.ancho, .boton.ancho { width: 100%; margin-right: 0; }
button.secundario, .boton.secundario {
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
  box-shadow: none;
}
button.secundario:hover, .boton.secundario:hover { background: var(--hueso); filter: none; }

/* --- avisos --- */
.avisos { margin-bottom: 18px; }
.aviso {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--azul); padding: 13px 16px; margin: 0 0 9px;
  border-radius: 0 12px 12px 0; font-size: 14.5px; box-shadow: var(--sombra);
}
.error { color: var(--rojo); font-size: 14.5px; margin: 0 0 14px; }
.advertencia {
  background: var(--ambar-suave); border: 1px solid #f0d9ab;
  border-left: 3px solid #d98324; border-radius: 0 12px 12px 0;
  padding: 15px 17px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.55;
}

/* --- lista de lo que me toca --- */
.fila { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.fila .nombre { font-weight: 700; font-size: 16.5px; margin: 0; }
.boton.corto { min-height: 42px; padding: 10px 20px; margin: 0; }
.sello {
  background: var(--verde-suave); color: var(--verde); font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}

/* --- el formulario --- */
.cabeza-bloque { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                 margin-bottom: 6px; }
.cabeza-bloque h2 { margin: 0; font-size: 17px; }
.pregunta-bloque { color: var(--azul); font-weight: 700; font-size: 14px; margin: 0; }
.intro-bloque { color: var(--tinta2); font-size: 14px; line-height: 1.55;
                margin: 0 0 4px; padding-bottom: 16px;
                border-bottom: 1px solid var(--linea2); }
.responsabilidades { margin: 0; padding-left: 19px; color: var(--tinta2);
                     font-size: 14.5px; }
.responsabilidades li { margin-bottom: 7px; }

.casilla { padding: 18px 0; border-top: 1px solid var(--linea2); }
.casilla:first-of-type { border-top: 0; }
.pregunta { font-weight: 700; margin: 0 0 5px; font-size: 15.5px; }
.ayuda-casilla { color: var(--tinta2); font-size: 14px; margin: 0 0 11px;
                 line-height: 1.5; }
.aviso-casilla {
  color: var(--ambar); background: var(--ambar-suave); border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px; margin: 0 0 11px; font-weight: 600;
}

.opciones { display: grid; gap: 8px; }
.casilla[data-escala="si_maso_no"] .opciones { grid-template-columns: repeat(4, 1fr); }
.casilla[data-escala="uno_a_cinco"] .opciones { grid-template-columns: repeat(3, 1fr); }
.opcion {
  margin: 0; font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--linea); border-radius: 11px;
  padding: 11px 6px; min-height: 48px; background: var(--papel);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; text-align: center; transition: border-color .12s, background .12s;
}
.opcion:hover { border-color: var(--tinta3); }
.opcion:has(input:checked) {
  border-color: var(--azul); background: var(--azul-suave); color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul) inset;
}
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.casilla[data-escala="uno_a_cinco"] .opcion { flex-direction: column; gap: 3px;
                                              padding: 10px 6px; }
.que-significa { font-size: 11px; font-weight: 600; opacity: .72; line-height: 1.25; }

.casilla textarea { display: none; margin-top: 12px; }
.casilla textarea.visible { display: block; }

/* Cuantas van. Un formulario de trece preguntas sin esto se siente infinito. */
.avance {
  position: sticky; top: 0; z-index: 5; background: var(--hueso);
  padding: 12px 0 14px; margin-bottom: 4px;
}
.avance-texto { display: flex; justify-content: space-between; font-size: 13.5px;
                font-weight: 700; color: var(--tinta2); margin-bottom: 7px; }
.avance-riel { height: 7px; background: var(--linea); border-radius: 999px;
               overflow: hidden; }
.avance-barra { height: 100%; width: 0;
                background: linear-gradient(90deg, var(--navy), var(--azul2));
                border-radius: 999px; transition: width .2s; }

/* --- tablas --- */
.ancho { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th, .tabla td { padding: 13px 15px; border-bottom: 1px solid var(--linea2);
                       text-align: left; vertical-align: top; }
.tabla thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--tinta3); background: #fbfaf8; white-space: nowrap;
                  font-weight: 700; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: 0; }
.tabla tbody tr:hover { background: #fcfbf9; }
.tabla a { color: var(--azul); text-decoration: none; font-weight: 700; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .centro { text-align: center; }
.tabla .izq { font-weight: 600; min-width: 180px; }
.tabla .fuerte { font-size: 18px; font-weight: 800; }
.tabla .chico { font-size: 13px; color: var(--tinta2); }
.tabla.apretada th, .tabla.apretada td { padding: 9px 10px; font-size: 13.5px; }
.celda-no   { background: var(--rojo-suave); color: var(--rojo); font-weight: 800; }
.celda-maso { background: var(--ambar-suave); color: var(--ambar); font-weight: 800; }
.celda-fi   { color: var(--tinta3); }
.tabla th.manda, .tabla td.manda { background: var(--azul-suave); }
.marca-manda { display: block; font-size: 10.5px; font-weight: 800; color: var(--azul);
               letter-spacing: .05em; }
.comentario { display: block; margin-top: 6px; font-size: 13px; color: var(--tinta2);
              text-align: left; font-weight: 400; line-height: 1.45; }

/* --- el resultado --- */
.notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px;
         margin-bottom: 16px; }
.nota { background: var(--hueso); border-radius: 13px; padding: 14px; text-align: center; }
.nota span { display: block; font-size: 24px; font-weight: 800;
             font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.nota small { color: var(--tinta3); font-size: 11px; text-transform: uppercase;
              letter-spacing: .06em; font-weight: 700; }
.nota.grande { grid-column: 1 / -1;
               background: linear-gradient(135deg, var(--navy), var(--azul));
               color: #fff; }
.nota.grande span { font-size: 44px; }
.nota.grande small { color: #b9c9ee; }
.nivel { font-size: 19px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.2px; }

.pastilla { display: inline-block; font-weight: 700; font-size: 12.5px;
            padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.pastilla.rojo  { background: var(--rojo-suave); color: var(--rojo); }
.pastilla.ambar { background: var(--ambar-suave); color: var(--ambar); }
.pastilla.verde { background: var(--verde-suave); color: var(--verde); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.etiqueta { background: var(--hueso); border: 1px solid var(--linea);
            border-radius: 999px; padding: 6px 13px; font-size: 13.5px;
            white-space: nowrap; }

.separador { color: var(--tinta3); font-size: 13px; text-align: center;
             margin: 20px 0 14px; }
.pie { margin-top: 20px; }

/* Debajo de esto no caben la marca completa, tres pestanas y el nombre. Se va el
   nombre antes que las pestanas: adentro uno ya sabe quien es. */
@media (max-width: 1080px) { .quien span { display: none; } }
@media (max-width: 860px) { .marca b { font-size: 13.5px; } .barra { gap: 14px; } }

/* En un telefono no caben la marca, tres pestanas y el salir en una linea. Las
   pestanas se van a una segunda fila que rueda de lado, que es como se resuelve esto
   en cualquier app. */
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; gap: 10px; padding: 0 15px; }
  .marca { padding: 10px 0; }
  .secciones {
    order: 3; width: 100%; margin: 0 -15px; padding: 0 15px 2px;
    overflow-x: auto; border-top: 1px solid var(--linea2);
    -webkit-overflow-scrolling: touch;
  }
  .secciones a { padding: 11px 12px; }
  .quien { margin-left: auto; }
  .subbarra { padding: 0 15px; }
}

@media (max-width: 620px) {
  .barra { min-height: 0; }
  .marca small { display: none; }
  .marca b { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
  .subbarra { padding: 0 15px; }
  main { padding: 18px 15px 60px; }
  .tarjeta { padding: 18px 16px; }
  h1 { font-size: 22px; }
  .notas { grid-template-columns: repeat(3, 1fr); }
}

/* Los botones de una tarjeta van en fila, no uno debajo de otro. Cada uno vive en su
   propio form, asi que la fila la arma el contenedor. */
.acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.acciones form { margin: 0; }
.acciones .boton, .acciones button { margin: 0; }

/* La tarjeta de entrada: los botones de ancho completo, que es una sola decision. */
.angosta button, .angosta .boton { width: 100%; }
.angosta h1 { font-size: 23px; margin-bottom: 8px; }

.nowrap { white-space: nowrap; }

/* Las columnas de verificacion: se leen de un vistazo, sin tener que abrir a nadie. */
.listo { color: var(--verde); font-weight: 800; }
.pendiente { color: var(--tinta3); }
.no-aplica { background: repeating-linear-gradient(45deg, transparent, transparent 4px,
             var(--linea2) 4px, var(--linea2) 5px); }

/* Lo provisional se ve, pero se ve mas apagado: no es el resultado que manda. */
.provisional { color: var(--tinta3) !important; font-weight: 600 !important; }
.asterisco { color: var(--tinta3); font-weight: 700; }
.es-provisional .nota.grande { background: var(--tinta2); }
.es-provisional .nivel { color: var(--tinta2); }

.etiqueta.chica { padding: 3px 9px; font-size: 12px; margin: 2px 4px 2px 0;
                  display: inline-block; }

/* --- la hoja: la tabla tipo Sheet --------------------------------------------------
   Veintitres columnas que tienen que caber sin deslizarse de lado. Todo lo de aqui
   busca ancho: las respuestas se dibujan en vez de escribirse, el nivel se parte en dos
   lineas en vez de estirar su columna, y los bloques se separan con una raya en vez de
   con espacio. */
.tabla.hoja { font-size: 12.5px; }
.tabla.hoja th, .tabla.hoja td { padding: 7px 6px; vertical-align: middle;
                                 border-bottom: 1px solid var(--linea2); }
.tabla.hoja .abre { border-left: 1px solid var(--linea); }

.tabla.hoja thead th { white-space: normal; }
.tabla.hoja thead tr.grupos th.grupo {
  text-align: center; font-size: 10px; letter-spacing: .04em; line-height: 1.25;
  color: var(--tinta2); background: var(--hueso); padding: 9px 5px 7px;
  border-bottom: 1px solid var(--linea);
}
.tabla.hoja thead tr.grupos th.grupo i { font-style: normal; font-weight: 600;
                                         color: var(--tinta3); }
.tabla.hoja thead tr.columnas th { font-size: 10.5px; padding: 6px 4px;
                                   letter-spacing: .03em; }
.tabla.hoja thead th.col-persona { vertical-align: bottom; background: var(--hueso); }

/* El nombre se queda pegado a la izquierda si igual toca deslizarse en una pantalla
   chica: una fila sin nombre no se puede leer. */
.tabla.hoja .col-persona { min-width: 168px; max-width: 210px; position: sticky;
                           left: 0; z-index: 2; background: var(--papel); }
.tabla.hoja thead .col-persona { z-index: 3; }
.tabla.hoja tbody tr:hover .col-persona { background: #fcfbf9; }
.tabla.hoja .col-persona a { font-size: 13px; }

.tabla.hoja td.casilla, .tabla.hoja th.col-casilla { width: 26px; min-width: 26px;
                                                     text-align: center; }
.tabla.hoja td.casilla { font-weight: 800; font-size: 13.5px; }
.c-si     { color: var(--verde); }
.c-maso   { background: var(--ambar-suave); color: var(--ambar); }
.c-no     { background: var(--rojo-suave); color: var(--rojo); }
.c-fi     { color: var(--tinta3); font-weight: 600; }
.c-vacia  { color: var(--linea); }
.c-numero { color: var(--tinta); font-weight: 700; font-size: 12px; }

.tabla.hoja td.pieza, .tabla.hoja th.col-pieza { width: 34px; min-width: 34px; }
.tabla.hoja td.num, .tabla.hoja th.col-nota { width: 40px; min-width: 40px; }
.tabla.hoja th.col-indice { width: 52px; }
.tabla.hoja .fuerte { font-size: 15.5px; }

/* Hay altura de sobra en la fila: que el nivel se parta en dos lineas en vez de
   estirar la columna a "Jugador con potencial A" de un solo renglon. */
.tabla.hoja td.nivel, .tabla.hoja th.col-nivel { max-width: 86px; }
.tabla.hoja td.nivel { white-space: normal; line-height: 1.15; font-size: 11.5px;
                       color: var(--tinta2); }
.tabla.hoja td.veredicto, .tabla.hoja th.col-veredicto { max-width: 138px; }
.tabla.hoja td.veredicto .pastilla { padding: 4px 9px; font-size: 10.5px;
                                     white-space: normal; line-height: 1.25; }
.tabla.hoja td.chico { max-width: 120px; white-space: normal; font-size: 11px; }

/* Ordenar con clic, como en el Sheet. */
th.ordena { cursor: pointer; -webkit-user-select: none; user-select: none; }
th.ordena:hover { color: var(--azul); }
th.ordena.asc::after  { content: " ▲"; font-size: 8px; color: var(--azul); }
th.ordena.desc::after { content: " ▼"; font-size: 8px; color: var(--azul); }

.leyenda { margin: 0; padding: 11px 16px; border-top: 1px solid var(--linea2);
           font-size: 12px; color: var(--tinta2); }
.leyenda b { color: var(--tinta); margin-left: 10px; }
.leyenda b:first-child { margin-left: 0; }
.leyenda .aparte { margin-left: 18px; color: var(--tinta3); }

@media (max-width: 720px) {
  .leyenda .aparte { display: block; margin: 4px 0 0; }
}

/* Una fila sin nota se ve, pero no compite con las que si la tienen. */
.tabla.hoja tr.sin-nota td { color: var(--tinta3); }

/* --- el veredicto, tapado ----------------------------------------------------------
   Dice si alguien sale de la empresa. Con la tabla abierta en una pantalla, quien pase
   no tendria que poder leerlo de reojo. Se destapa pasando el cursor por la celda, o con
   el ojo del encabezado, que destapa quince segundos y vuelve a tapar solo. */
.tabla.hoja td.veredicto .real { display: none; }
.tabla.hoja td.veredicto .tapa {
  display: inline-block; letter-spacing: .18em; color: var(--tinta3);
  background: var(--linea2); border-radius: 999px; padding: 4px 12px;
  font-size: 11px; cursor: default;
}
.tabla.hoja td.veredicto:hover .real,
.tabla.hoja td.veredicto:focus .real,
.tabla.hoja.destapada td.veredicto .real { display: inline-block; }
.tabla.hoja td.veredicto:hover .tapa,
.tabla.hoja td.veredicto:focus .tapa,
.tabla.hoja.destapada td.veredicto .tapa { display: none; }
.tabla.hoja td.veredicto:focus { outline: 2px solid var(--azul); outline-offset: -2px; }

.ojo {
  border: 0; background: none; padding: 2px 3px; margin-left: 5px; cursor: pointer;
  color: var(--tinta3); vertical-align: -2px; line-height: 0; border-radius: 4px;
}
.ojo:hover { color: var(--azul); background: var(--azul-suave); }
.ojo.viva { color: var(--azul); background: var(--azul-suave); }
.ojo:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* --- la accion acordada --- */
.tabla.hoja td.accion .txt { display: block; }
.tabla.hoja td.accion .txt.propuesta { color: var(--tinta3); font-style: italic; }
.tabla.hoja td.accion .cuando { display: block; margin-top: 2px; font-size: 10.5px;
                                color: var(--tinta3); font-variant-numeric: tabular-nums; }
.tabla.hoja td.accion .vacio { color: var(--tinta3); }
button.editar-accion {
  display: block; width: 100%; text-align: left; border: 1px solid transparent;
  background: none; font: inherit; color: inherit; cursor: pointer;
  padding: 4px 6px; margin: -4px -6px; border-radius: 7px;
}
button.editar-accion:hover { border-color: var(--linea); background: var(--hueso); }
button.editar-accion:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

dialog#editor-accion {
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 0;
  max-width: 520px; width: calc(100% - 32px); box-shadow: 0 18px 50px rgba(16,24,40,.18);
  color: var(--tinta); background: var(--papel);
}
dialog#editor-accion::backdrop { background: rgba(10,18,40,.34); }
dialog#editor-accion .dlg { padding: 22px 24px 24px; margin: 0; }
dialog#editor-accion h2.dlg-nombre { font-size: 20px; margin: 2px 0 16px; }
.eyebrow-dlg { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
               color: var(--tinta3); font-weight: 700; }
dialog#editor-accion label { display: block; margin-bottom: 14px; font-size: 13.5px;
                             font-weight: 600; color: var(--tinta2); }
dialog#editor-accion textarea, dialog#editor-accion input[type=date] {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--tinta); font-weight: 400;
}
dialog#editor-accion input[type=date] { max-width: 200px; }
.dlg-error { color: var(--rojo); font-size: 13.5px; margin: 0 0 12px; }
.dlg-botones { display: flex; gap: 9px; margin-top: 4px; }
.boton.fantasma { background: none; color: var(--tinta2); border: 1px solid var(--linea); }
.dlg-historial { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea2); }
.dlg-historial ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.dlg-historial li { font-size: 13.5px; color: var(--tinta2); line-height: 1.4; }
.dlg-historial li b { display: block; font-size: 11px; color: var(--tinta3);
                      font-weight: 700; letter-spacing: .03em; margin-bottom: 1px; }

/* --- el desplegable de corrida, con su rotulo ---
   Antes decia "Q3 2026" y nada mas. Quien entra por primera vez no tenia forma de saber
   que era ni para que servia. */
.selector { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: -6px 0 18px; }
.selector label { display: flex; align-items: center; gap: 10px; margin: 0; }
.selector .rotulo { font-size: 13.5px; font-weight: 600; color: var(--tinta2);
                    white-space: nowrap; }
.selector select { max-width: 420px; min-width: 210px; margin: 0; }
.selector .pista { font-size: 13px; color: var(--tinta3); }

/* --- la guia de la tabla ---
   Cerrada por defecto para no llenar la pantalla, pero a un clic y con el nombre bien
   grande: quien entra por primera vez no tendria que necesitar que alguien le explique. */
.guia { margin: 14px 0 0; border: 1px solid var(--linea); border-radius: var(--radio);
        background: var(--papel); box-shadow: var(--sombra); }
.guia > summary {
  cursor: pointer; padding: 15px 20px; font-weight: 700; font-size: 15px;
  color: var(--azul); list-style: none; display: flex; align-items: center; gap: 9px;
  border-radius: var(--radio);
}
.guia > summary::-webkit-details-marker { display: none; }
.guia > summary::before { content: "›"; font-size: 20px; line-height: 1;
                          transition: transform .15s; display: inline-block; }
.guia[open] > summary::before { transform: rotate(90deg); }
.guia > summary:hover { background: var(--azul-suave); }
.guia > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.guia-cuerpo { padding: 2px 20px 20px; }
.guia dl { margin: 0; display: grid; gap: 14px; }
.guia dt { font-weight: 700; font-size: 13.5px; color: var(--tinta); }
.guia dd { margin: 3px 0 0; font-size: 14px; color: var(--tinta2); line-height: 1.5;
           max-width: 72ch; }
.guia dd b { color: var(--tinta); }
.guia dd b.listo { color: var(--verde); }

@media (min-width: 820px) {
  .guia dl { grid-template-columns: 190px 1fr; gap: 13px 22px; align-items: baseline; }
  .guia dt { grid-column: 1; text-align: right; }
  .guia dd { grid-column: 2; margin: 0; }
}

/* La lista de correos agregados: cada uno con su forma de quitarlo al lado. */
.sub { font-size: 14px; margin: 22px 0 8px; color: var(--tinta2); }
.lista-alternos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-alternos li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                     padding: 10px 13px; border: 1px solid var(--linea);
                     border-radius: 11px; font-size: 14px; }
.lista-alternos li form { margin: 0 0 0 auto; }
.lista-alternos li button { margin: 0; }

/* La sincronizacion con Odoo: lo que va a cambiar, y quien participa. */
.plan-odoo { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.plan-odoo .etiquetas { margin-bottom: 10px; }
.lista-cambios { margin: 4px 0 12px; padding-left: 18px; }
.lista-cambios li { margin: 2px 0; }
tr.apagada td { opacity: .5; }