/* componentes.css — Componentes usados por los módulos (tabs, rejillas, métricas, toasts, diálogos…).
   Solo usa variables de tokens.css. */

/* Layout auxiliar */
body.sin-sesion #app { grid-template-columns: 1fr; }
body.sin-sesion #menu { display: none; }
.estrecha { max-width: 520px; margin: 24px auto; }
.logo-login { display: block; height: 56px; margin: 0 auto 8px; background: var(--ssc-negro); padding: 8px 16px; border-radius: var(--radio-sm); }
#cabecera > img { height: 76px; width: auto; max-width: 250px; object-fit: contain; }
.logo-login { height: 104px; max-width: 90%; object-fit: contain; }
@media print { #cabecera, #menu, .barra, .btn, .tabs { display: none !important; } body { background: #fff; } .tarjeta { box-shadow: none; } }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.lista-apoyos { display: grid; gap: 10px; margin-top: 12px; }
.item-apoyo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 14px; align-items: center; }
.fila.fin { justify-content: flex-end; }
.fila.envolver { margin-top: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .rejilla.cuatro { grid-template-columns: repeat(2, 1fr); } }
.campo { margin-bottom: 4px; }
.campo small, small { color: var(--texto-suave); }
.chico { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); }
.enlace { display: inline-flex; align-items: center; text-decoration: none; }
.usuario { font-size: var(--t-sm); opacity: .9; }
#cabecera .btn.secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
#menu .ico { width: 8px; height: 8px; border-radius: 50%; background: var(--ssc-rojo); flex: none; }

/* Pestañas */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--espacio); }
.tab { min-height: 44px; padding: 0 16px; border: 2px solid var(--borde); background: var(--ssc-blanco); border-radius: 999px; font: inherit; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--ssc-negro); color: #fff; border-color: var(--ssc-negro); }

/* Resumen de actividades */
.resumen { display: grid; gap: 10px; margin-bottom: var(--espacio); }
.item-resumen { display: grid; gap: 4px; text-align: left; font: inherit; cursor: pointer; background: var(--ssc-blanco);
  border: 2px solid var(--borde); border-left: 6px solid var(--ssc-gris-200); border-radius: var(--radio); padding: 12px 16px; box-shadow: var(--sombra); }
.item-resumen:hover { border-left-color: var(--ssc-rojo); }
.item-resumen.activa { border-color: var(--ssc-rojo); border-left-color: var(--ssc-rojo); }
.insignias { display: flex; gap: 8px; flex-wrap: wrap; }
.insignias em { font-style: normal; font-size: var(--t-sm); background: var(--ssc-gris-100); border-radius: 999px; padding: 2px 10px; }
.fecha-histo { display: block; margin: 8px 0 4px; }

/* Secciones del formulario */
.seccion header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--borde); padding-bottom: 8px; }
.seccion h2 { margin: 0; font-size: var(--t-lg); }
.completada { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; white-space: nowrap; }
.completada input, .check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--ssc-rojo); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 12px 0 6px; }
.grupo { border: 2px solid var(--borde); border-radius: var(--radio-sm); margin: 12px 0; }
.sello { margin: 0 0 8px; color: var(--ok); font-weight: 600; font-size: var(--t-sm); }
textarea { resize: vertical; }
input[readonly] { background: var(--ssc-gris-100); }

/* Operarios */
.lista-op { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.lista-op li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ssc-gris-100); border-radius: var(--radio-sm); }
.resultados { display: grid; gap: 4px; margin-top: 6px; }
.resultado { text-align: left; font: inherit; cursor: pointer; padding: 10px 12px; border: 2px solid var(--borde); background: #fff; border-radius: var(--radio-sm); min-height: 44px; }
.resultado:hover { border-color: var(--ssc-rojo); }
.resultado.nuevo { font-weight: 600; }

/* Pérdidas */
.perdida { border: 2px solid var(--borde); border-radius: var(--radio-sm); padding: 12px; margin-bottom: 10px; }
.perdida.invalida { border-color: var(--error); background: #FFF7F8; }
.minutos { font-weight: 700; }
.error { color: var(--error); display: block; min-height: 1em; }

/* Catálogos */
.item-cat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.item-cat.inactivo { opacity: .55; }

/* Métricas de inicio */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--espacio); }
.metrica { background: var(--ssc-blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; border-top: 4px solid var(--ssc-rojo); display: grid; gap: 4px; }
.metrica strong { font-size: var(--t-xl); line-height: 1; }
.metrica span { color: var(--texto-suave); font-size: var(--t-sm); }

/* Avisos emergentes y diálogos */
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ssc-negro); color: #fff; padding: 12px 16px; border-radius: var(--radio-sm); border-left: 5px solid var(--ok); box-shadow: var(--sombra); transition: opacity .3s; }
.toast.aviso { border-left-color: #F5A524; }
.toast.error { border-left-color: var(--ssc-rojo); }
.toast.sale { opacity: 0; }
.dialogo { border: 0; border-radius: var(--radio); padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); max-width: min(480px, calc(100vw - 32px)); width: 100%; }
.dialogo::backdrop { background: rgba(0,0,0,.55); }

/* ===== Formulario en una sola hoja (Actividad en turno) ===== */
.hoja { padding: 0; overflow: hidden; }
.hoja > .aviso, .hoja > .barra { margin: 16px 20px 0; }
.bloque { padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.bloque:last-child { border-bottom: 0; }
.bloque > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.bloque h2 { margin: 0; font-size: var(--t-lg); border-left: 5px solid var(--ssc-rojo); padding-left: 10px; }
.fila-hoja { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px) { .fila-hoja { grid-template-columns: 1fr; } }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.galeria figure { margin: 0; display: grid; gap: 6px; }
.miniatura { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ssc-gris-100); border-radius: var(--radio-sm); cursor: zoom-in; }

/* ===== Tablas y vistas de Control ===== */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th { text-align: left; background: var(--ssc-negro); color: #fff; padding: 10px 12px; white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla tr.abierta td:last-child { color: var(--aviso); font-weight: 700; }
.actividad > header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.actividad h2 { margin: 0; }
.datos-linea { color: var(--texto-suave); margin: 6px 0; }
.texto-actividad { white-space: pre-wrap; background: var(--ssc-gris-100); padding: 12px; border-radius: var(--radio-sm); }
.ext-fila { margin: 8px 0; }
.vista-previa { white-space: pre-wrap; background: var(--ssc-gris-100); padding: 12px; border-radius: var(--radio-sm); font-family: inherit; }

/* ===== Plantillas: variables ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { font: inherit; font-size: var(--t-sm); cursor: pointer; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borde); background: #fff; min-height: 32px; }
.chip:hover { border-color: var(--ssc-rojo); }

/* ===== Gráficas ===== */
.lienzo { position: relative; height: 300px; }

/* ===== Planner ===== */
.tablero { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 12px; }
.columna { flex: 0 0 290px; background: var(--ssc-gris-200); border-radius: var(--radio); padding: 10px; display: grid; gap: 10px; }
.columna.sobre { outline: 3px dashed var(--ssc-rojo); }
.columna > header { display: flex; justify-content: space-between; align-items: center; }
.columna h2 { margin: 0; font-size: var(--t-md); }
.lista-tj { display: grid; gap: 8px; min-height: 12px; }
.tj { background: #fff; border-radius: var(--radio-sm); padding: 10px 12px; box-shadow: var(--sombra); cursor: grab; display: grid; gap: 4px; }
.tj p { margin: 0; color: var(--texto-suave); font-size: var(--t-sm); }
.tj.arrastrando { opacity: .4; }
.tj .fila { margin-top: 4px; }
.vencida { background: var(--ssc-rojo-suave) !important; color: var(--error); font-weight: 700; }

#cabecera > img { height: 72px; max-width: 220px; object-fit: contain; }
.logo-login { height: 100px; max-width: 90%; object-fit: contain; }
@media print { #cabecera, #menu, .barra, .btn, .tabs { display:none !important; } body { background:#fff; } .tarjeta { box-shadow:none; } }

/* ===== Formularios de los OMT ===== */
.rejilla.formulario { margin-bottom: 8px; }
.campo.ancho { grid-column: 1 / -1; }
.campo-otro { display: grid; gap: 6px; }
.subtitulo { margin: 16px 0 8px; font-size: var(--t-md); border-left: 4px solid var(--ssc-rojo); padding-left: 8px; }
.calculo { font-weight: 600; color: var(--ok); min-height: 1.2em; margin: 4px 0; }
.criterios { display: grid; gap: 8px; }
.criterio { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 6px 10px; background: var(--ssc-gris-100); border-radius: var(--radio-sm); }
.criterio input { text-align: center; }
.tabla td.acciones { white-space: nowrap; }
.tabla td.acciones .btn { margin: 2px; }
.tabla td.texto-largo { min-width: 260px; max-width: 520px; white-space: pre-wrap; }
.dialogo.ancho { max-width: min(760px, calc(100vw - 32px)); }
.detalle { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.detalle dt { font-weight: 600; color: var(--texto-suave); }
.detalle dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 600px) { .detalle { grid-template-columns: 1fr; } .criterio { grid-template-columns: 1fr 90px; } }

/* ===== Dashboard: resumen por turno ===== */
.rejilla-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: var(--espacio); }
.resumen-modulo { margin: 0; }
.resumen-modulo .cifra { font-size: var(--t-xl); color: var(--ssc-rojo); }
.resumen-modulo.vacio-mod { opacity: .6; }
.tabla.resumen-turno td.num, .tabla.resumen-turno th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla.resumen-turno td.total { font-weight: 700; background: var(--ssc-gris-100); }
.tabla.resumen-turno tr.principal td { font-weight: 700; }
.desglose { margin-top: 10px; }
.desglose summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* Contador del turno en la cabecera */
.contador-turno { font-variant-numeric: tabular-nums; font-size: var(--t-sm); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap; color: #fff; }
@media (max-width: 700px) { .contador-turno { white-space: normal; } }

/* ===== Formularios limpios: ayuda en ventana emergente (sin ocupar espacio) ===== */
.campo.con-ayuda { position: relative; }
.ayuda-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  background: var(--ssc-gris-200); color: var(--texto-suave); font: 700 11px/1 var(--fuente); vertical-align: 1px; }
.ayuda-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; max-width: 320px;
  background: var(--ssc-negro); color: #fff; font-size: var(--t-sm); line-height: 1.45; white-space: pre-line;
  padding: 10px 12px; border-radius: var(--radio-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--anim), transform var(--anim), visibility var(--anim);
  pointer-events: none; }
.ayuda-pop::before { content: ''; position: absolute; top: -6px; left: 18px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ssc-negro); }
.campo.con-ayuda:hover .ayuda-pop, .campo.con-ayuda:focus-within .ayuda-pop { opacity: 1; visibility: visible; transform: none; }
.rejilla.formulario { gap: 14px 18px; align-items: start; }
.rejilla.formulario .campo label { font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }

/* ===== Cabecera de alto impacto en cada módulo (neón rojo) ===== */
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1),
body:not(.sin-sesion) #contenido > h1:first-child,
body:not(.sin-sesion) #contenido > div:first-child > h1:first-child {
  position: relative; overflow: hidden; isolation: isolate; color: #F5F5F5;
  background-color: #08080A;
  background-image: var(--banner-img, none), radial-gradient(circle at 88% 50%, rgba(255,7,7,.30), transparent 55%), linear-gradient(120deg, #050506 0%, #120507 55%, #2A0306 100%);
  background-repeat: no-repeat; background-size: 92px 92px, cover, cover; background-position: right 32px center, center, center;
  border: 1px solid rgba(255,40,40,.55); border-radius: var(--radio);
  box-shadow: 0 0 0 1px rgba(255,7,7,.15), 0 0 28px rgba(255,7,7,.28), inset 0 0 40px rgba(255,7,7,.08);
  padding: 26px 156px 26px 28px; margin-bottom: var(--espacio);
}
body:not(.sin-sesion) #contenido > h1:first-child,
body:not(.sin-sesion) #contenido > div:first-child > h1:first-child { font-size: var(--t-xl); max-width: none !important; display: block; }
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) > h1,
body:not(.sin-sesion) #contenido > h1:first-child,
body:not(.sin-sesion) #contenido > div:first-child > h1:first-child {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #fff; margin: 0 0 6px; max-width: 100%;
  text-shadow: 0 0 6px rgba(255,40,40,.9), 0 0 18px rgba(255,7,7,.6), 0 0 38px rgba(255,7,7,.35);
}
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) > p { color: #E7E7EA; max-width: 980px; margin: 4px 0 0; }
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) > .aviso { max-width: 980px; }
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) label,
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) small { color: #D6D6DA; }
body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) .aviso { color: var(--texto); }
@media (max-width: 700px) {
  body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) { background-size: 52px 52px, cover, cover; background-position: right 14px top 14px, center, center; padding: 20px 76px 20px 18px; }
  body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) > h1, body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) > p { max-width: 100%; }
}

/* Resumen por turno: fecha, informe y botones en una sola fila */
.barra-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 12px; }
.barra-controles .campo { margin: 0; flex: 0 0 auto; }
.barra-controles input[type=date] { width: 190px; }
.barra-controles select { width: 220px; }
.barra-controles .botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Control de precintos */
.alerta-precinto h2 { color: var(--peligro, #c62828); }
.alerta-precinto .uso-precinto { border-left: 3px solid var(--peligro, #c62828); padding: 4px 12px; margin: 10px 0; background: rgba(198,40,40,.05); border-radius: 6px; }
.alerta-precinto .detalle { grid-template-columns: max-content 1fr; }
input.precinto-malo { border-color: var(--peligro, #c62828) !important; box-shadow: 0 0 0 3px rgba(198,40,40,.18); }
tr.abierta.vencida td { background: rgba(198,40,40,.12); }
tr.abierta.vencida td:first-child { box-shadow: inset 4px 0 0 #c62828; }

/* Minuta: Asunto y Frente a la izquierda, Anotación al lado ocupando el alto */
.rejilla.formulario.dist-minuta { grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(320px, 2.4fr); }
.dist-minuta .c-asunto { grid-column: 1; grid-row: 1; }
.dist-minuta .c-frente { grid-column: 2; grid-row: 1; }
.dist-minuta .c-revision { grid-column: 1; grid-row: 2; }
.dist-minuta .c-anotacion { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.dist-minuta .c-anotacion textarea { flex: 1; min-height: 132px; }
@media (max-width: 900px) {
  .rejilla.formulario.dist-minuta { grid-template-columns: 1fr; }
  .dist-minuta .campo { grid-column: auto !important; grid-row: auto !important; }
}

/* Estado de revisión */
.estado-rev { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.estado-rev.rev-importante { background: rgba(198, 40, 40, .14); color: #b71c1c; }
.estado-rev.rev-pendiente { background: rgba(245, 158, 11, .18); color: #9a5b00; }
.estado-rev.rev-revisado { background: rgba(22, 163, 74, .15); color: #166534; }

/* Pendientes por tramitar (debajo de Guardar / Limpiar) */
.pendientes { margin-top: 22px; border: 1px solid rgba(245, 158, 11, .45); border-left: 5px solid #f59e0b; border-radius: 12px; padding: 14px 16px; background: rgba(245, 158, 11, .06); }
.pend-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pend-cabecera h2 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.pend-cuenta { min-width: 28px; text-align: center; padding: 2px 9px; border-radius: 999px; background: #d1d5db; color: #111; font-weight: 700; }
.pend-cuenta.hay { background: #f59e0b; color: #1a1a1a; }
.pend-lista { display: grid; gap: 10px; max-height: 460px; overflow: auto; padding-right: 4px; }
.pend-item { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 2.4fr) auto; gap: 8px 16px; align-items: center; background: var(--fondo-tarjeta, #fff); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pend-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pend-etq { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: rgba(198, 40, 40, .1); color: #8b1a1a; }
.pend-etq.suave { background: rgba(0, 0, 0, .06); color: inherit; }
.pend-texto { margin: 0; white-space: pre-line; max-height: 7.5em; overflow: auto; }
.pend-accion { display: flex; gap: 8px; align-items: center; }
.pend-accion select { min-width: 140px; }
@media (max-width: 900px) { .pend-item { grid-template-columns: 1fr; } }

/* Lista inteligente (escribir o elegir, con sinónimos) */
.combo { position: relative; display: block; }
.combo input { width: 100%; }
.combo input.invalido { border-color: var(--error, #c62828); }
.combo-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--borde, #d1d5db); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); max-height: 280px; overflow: auto; }
.combo-lista li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: var(--t-sm, 14px); }
.combo-lista li:hover, .combo-lista li.activo { background: rgba(198, 40, 40, .09); }
.combo-lista li.elegido { font-weight: 700; }
.combo-lista li.vacio { cursor: default; color: var(--texto-suave, #666); }
.combo-nota { display: block; min-height: 0; margin-top: 4px; color: var(--texto-suave, #666); font-size: 12px; }
.combo-nota:empty { display: none; }
.sugerencia { margin-top: 6px; font-size: 12px; color: var(--texto-suave, #666); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sugerencia:empty { display: none; }
.chip-sugerencia { border: 1px dashed #c62828; background: rgba(198, 40, 40, .06); color: #8b1a1a; border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; }
.chip-sugerencia:hover { background: rgba(198, 40, 40, .14); }
.campo.con-ayuda:has(.combo-lista:not([hidden])) .ayuda-pop, .campo.con-ayuda:has(.combo):focus-within .ayuda-pop { opacity: 0; visibility: hidden; }
.campo[hidden] { display: none !important; }

@media (min-width: 701px) and (max-width: 1100px) {
  body:not(.sin-sesion) #contenido > .tarjeta:first-child:has(> h1) { background-size: 72px 72px, cover, cover; background-position: right 22px center, center, center; padding-right: 116px; }
}

/* Registros guardados en el equipo sin conexión */
.cola-local { border: 1px solid rgba(37, 99, 235, .35); border-left: 5px solid #2563eb; background: rgba(37, 99, 235, .06); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.cola-cab { display: flex; align-items: center; gap: 10px; }
.cola-nota { margin: 4px 0 8px; font-size: 12px; color: var(--texto-suave, #666); }
.cola-item { display: grid; grid-template-columns: 90px minmax(160px, 1fr) minmax(140px, auto) auto auto; gap: 8px 12px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #fff; margin-top: 6px; font-size: 13px; }
.cola-item.rechazado { background: rgba(198, 40, 40, .07); }
.cola-item.rechazado .cola-estado { color: #b71c1c; font-weight: 600; }
.cola-hora { font-weight: 700; }
.cola-estado { color: #1d4ed8; }
@media (max-width: 800px) { .cola-item { grid-template-columns: 1fr; } }

/* Dashboard: atajos de periodo (día o rango de fechas) */
.atajos-periodo { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.chip-periodo { border: 1px solid var(--borde, #d1d5db); background: #fff; color: var(--texto, #111); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.chip-periodo:hover { border-color: #c62828; }
.chip-periodo.activo { background: #c62828; border-color: #c62828; color: #fff; font-weight: 700; }
.periodo-resumen { margin: 0 0 10px; font-weight: 700; color: var(--texto-suave, #555); }

/* Claves, cédulas y PIN: texto enmascarado (el navegador no ofrece guardarlos) */
input.secreto { -webkit-text-security: disc; text-security: disc; letter-spacing: .12em; font-family: inherit; }
.tarjeta > .atajos-periodo:first-child { margin: 0 0 12px; }

/* Inicio: directorio de OMT (N.º de Control y nombre) */
.omt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.omt-ficha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde, #e5e7eb); border-radius: 12px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.omt-ficha:hover { border-color: rgba(198, 40, 40, .45); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.omt-control { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1d, #3a0a0d); color: #fff; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255, 60, 60, .45), 0 0 10px rgba(255, 7, 7, .18); }
.omt-nombre { flex: 1; font-weight: 600; line-height: 1.25; font-size: 14px; }
.omt-ficha.yo { border-color: #c62828; background: rgba(198, 40, 40, .05); }
.omt-ficha.yo .omt-control { background: linear-gradient(135deg, #c62828, #ff2a2a); }
.omt-yo { font-size: 11px; font-weight: 700; color: #b71c1c; background: rgba(198, 40, 40, .1); border-radius: 999px; padding: 2px 8px; }
.editar-gestor { max-height: 68vh; overflow: auto; padding-right: 4px; }
.btn-editar { border-color: rgba(198, 40, 40, .5); }
.etq-historico { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #555; background: #eceef1; border-radius: 999px; padding: 1px 7px; }
.cargando { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* Filtros y orden desde el encabezado de las tablas (como Excel) */
.th-filtro { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.filtro-col { border: 0; background: rgba(255, 255, 255, .14); color: inherit; width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  font-size: 12px; line-height: 22px; padding: 0; flex: 0 0 auto; }
.filtro-col:hover { background: rgba(255, 255, 255, .28); }
.filtro-col.activo { background: #e53935; color: #fff; box-shadow: 0 0 8px rgba(255, 30, 30, .6); }
.filtro-pop { position: absolute; z-index: 1000; width: 280px; background: #fff; color: var(--texto, #111); border: 1px solid var(--borde, #d1d5db);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .22); padding: 10px; font-size: 13px; }
.filtro-tit { font-weight: 800; margin: 2px 4px 8px; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: #8b1a1a; }
.filtro-orden { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.filtro-orden:hover { background: rgba(198, 40, 40, .08); }
.filtro-orden.activo { background: rgba(198, 40, 40, .12); font-weight: 700; }
.filtro-pop hr { border: 0; border-top: 1px solid var(--borde, #e5e7eb); margin: 8px 0; }
.filtro-pop input[type=search] { width: 100%; margin-bottom: 6px; }
.filtro-lista { max-height: 230px; overflow: auto; border: 1px solid var(--borde, #e5e7eb); border-radius: 8px; padding: 4px; }
.filtro-op { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.filtro-op:hover { background: rgba(0, 0, 0, .04); }
.filtro-op.todos { font-weight: 700; padding: 6px; }
.filtro-op.vacias .filtro-val { font-style: italic; color: #8b1a1a; }
.filtro-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-n { font-size: 11px; color: var(--texto-suave, #666); background: #f1f2f4; border-radius: 999px; padding: 0 7px; }
.filtro-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.filtro-resumen { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding: 4px 6px 4px 12px; border-radius: 999px;
  background: rgba(198, 40, 40, .08); color: #8b1a1a; font-size: 13px; }
.filtro-resumen strong { font-size: 15px; }
.filtro-op input[type=checkbox] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; flex: 0 0 auto; accent-color: #c62828; }
.filtro-pop input[type=search] { padding: 7px 10px; font-size: 13px; }
.filtro-op, .filtro-op.todos { margin: 0; min-height: 0; font-size: 13px; text-transform: none; letter-spacing: 0; }
/* Columna Control: número arriba y la etiqueta «Histórico» debajo, sin montarse */
.celda-control { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }
.celda-control .num-control { font-weight: 700; font-variant-numeric: tabular-nums; }
.celda-control .etq-historico { margin-left: 0; }
.chk-inactivos { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: 13px; }
.chk-inactivos input { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: #c62828; }
/* Maestros: dos secciones grandes (Personal en mina / Administración) */
.maestros-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: var(--espacio); }
.maestro-btn { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 14px; cursor: pointer; font: inherit;
  border: 2px solid var(--borde); background: var(--ssc-blanco); transition: border-color .15s, box-shadow .15s, transform .15s; }
.maestro-btn:hover { border-color: #c62828; transform: translateY(-1px); }
.maestro-btn strong { display: block; font-size: 17px; letter-spacing: .04em; }
.maestro-btn small { display: block; color: var(--texto-suave, #666); margin-top: 2px; }
.maestro-btn.activo { background: var(--ssc-negro); color: #fff; border-color: #e53935; box-shadow: 0 0 0 3px rgba(229, 57, 53, .25), 0 0 18px rgba(255, 30, 30, .25); }
.maestro-btn.activo small { color: #ddd; }
.maestro-ico { font-size: 30px; line-height: 1; }
/* Informes: datos clave en rejilla, personas involucradas por filas, guía bajo la etiqueta y botón Word */
.rejilla.formulario.dist-informe { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
.dist-informe .c-proceso { grid-column: span 2; }
.dist-informe .c-repositorioRuta { grid-column: span 3; }
@media (max-width: 900px) { .rejilla.formulario.dist-informe { grid-template-columns: 1fr 1fr; } .dist-informe .c-proceso, .dist-informe .c-repositorioRuta { grid-column: auto; } }
.informe-auto { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px; margin: 0 0 14px; border-radius: 10px;
  background: #111; color: #fff; border-left: 4px solid #e53935; font-size: 14px; }
.informe-auto strong { color: #ff6b6b; }
.guia-campo { display: block; margin: -2px 0 6px; color: var(--texto-suave, #666); font-size: 12.5px; font-style: italic; }
.personas { border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; padding: 10px 12px; background: #fafafa; }
.personas-cuantas { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; }
.personas-cuantas select { width: 90px; }
.personas-filas { display: grid; gap: 8px; }
.persona-fila { display: grid; grid-template-columns: 30px minmax(110px, 1fr) minmax(220px, 3fr) minmax(150px, 1.2fr); gap: 8px; align-items: center; }
.persona-n { width: 26px; height: 26px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
@media (max-width: 700px) { .persona-fila { grid-template-columns: 26px 1fr; } .persona-fila > :nth-child(n+3) { grid-column: 2; } }
.btn.btn-word { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.btn.btn-word:hover { background: #172e6e; }
input.hora-militar { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
input.hora-militar.invalida { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.18); }
/* Informes: aprobación por WhatsApp y envío por correo */
.aprob { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.aprob.pend { background: #fff4d6; color: #8a5a00; }
.aprob.ok { background: #e3f4e6; color: #1b5e20; }
.aprob.error { background: #fde4e4; color: #b71c1c; }
.btn.btn-aprobar { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.wa-aprobadores { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.btn.wa-btn { background: #25d366; border-color: #25d366; color: #0b3d1e; text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 10px 16px; }
.btn.wa-btn small { font-weight: 500; font-size: 12px; }
.wa-mensaje { white-space: pre-wrap; background: #f6f6f6; border-radius: 8px; padding: 10px; font-size: 13px; max-height: 260px; overflow: auto; }
.aprobadores { display: grid; gap: 8px; margin-bottom: 10px; }
.aprobador-fila { display: grid; grid-template-columns: 30px minmax(180px, 2fr) minmax(170px, 1.3fr) auto; gap: 8px; align-items: center; }
.correo-estado { display: flex; flex-direction: column; gap: 4px; border-left: 5px solid #2e7d32; }
.correo-estado.falta { border-left-color: #c62828; background: #fff5f5; }
/* Personal OMT: conteo de activos / inactivos */
.omt-conteo { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.omt-conteo .cnt { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.omt-conteo .cnt.act { background: #e3f4e6; color: #1b5e20; }
.omt-conteo .cnt.ina { background: #f1f1f1; color: #555; }
.tabla-completa .tabla-cab { margin-bottom: 8px; }
.dialogo.alerta { max-width: 460px; border-top: 5px solid #c62828; }
.dialogo.alerta h2 { margin-top: 0; color: #b71c1c; }
/* Inicio: tareas pendientes del relevo de turno */
.tareas-turno { border-left: 5px solid #e53935; }
.tareas-cab { gap: 10px; }
.tareas-listas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-lista { border: 1px solid var(--borde, #d1d5db); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip-lista.activa { background: #111; color: #fff; border-color: #111; }
.chip-lista .n { background: #e53935; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.tarea-nueva { display: grid; grid-template-columns: minmax(260px, 1fr) 120px auto; gap: 10px; align-items: end; margin: 12px 0; }
.tarea-nueva .campo, .tarea-nueva label { margin-bottom: 0; }
@media (max-width: 760px) { .tarea-nueva { grid-template-columns: 1fr; } }
.tareas-lista { display: grid; gap: 8px; }
.tarea { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; background: #fffaf2; }
.tarea.hecha { background: #f4f8f4; opacity: .85; }
.tarea.hecha .tarea-texto { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }
.tarea-texto { grid-column: 1; font-weight: 600; white-space: pre-wrap; }
.tarea-hora { display: inline-block; margin-right: 8px; background: #111; color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; text-decoration: none; }
.tarea-meta { grid-column: 1; color: var(--texto-suave, #666); }
.tarea-acciones { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }
.tareas-hechas { margin-top: 10px; }
.tareas-hechas summary { cursor: pointer; font-weight: 600; color: var(--texto-suave, #555); margin-bottom: 8px; }
.tareas-aviso .tarea { background: #fff4e5; }
/* Inicio: indicadores del día (Planeación y seguimiento) */
.indicadores-dia .kpis { margin-top: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .indicadores-dia .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metrica.kpi { position: relative; padding-top: 14px; }
.kpi-ico { font-size: 22px; line-height: 1; display: block; margin-bottom: 4px; }
.metrica.kpi small { display: block; color: var(--texto-suave, #666); font-size: 11.5px; }
.kpi-cumplimiento { grid-column: span 2; border-left: 6px solid #9e9e9e; }
.kpi-cumplimiento.azul { border-left-color: #1565c0; } .kpi-cumplimiento.amarillo { border-left-color: #f9a825; }
.kpi-cumplimiento.naranja { border-left-color: #ef6c00; } .kpi-cumplimiento.rojo { border-left-color: #c62828; }
.kpi-pe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 4px; }
.kpi-pe small { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.kpi-pe strong { font-size: 24px; }
.kpi-cumplimiento.azul .kpi-pct { color: #1565c0; } .kpi-cumplimiento.amarillo .kpi-pct { color: #b07800; }
.kpi-cumplimiento.naranja .kpi-pct { color: #ef6c00; } .kpi-cumplimiento.rojo .kpi-pct { color: #c62828; }
@media (max-width: 600px) { .kpi-cumplimiento { grid-column: auto; } }
.aprob.wa { background: #e3f6ec; color: #0b6b3a; }
.btn.wa-btn.enviado { outline: 3px solid #0b6b3a; }
.btn.wa-btn.enviado::after { content: ' ✓ abierto'; font-size: 12px; }
.btn.btn-eliminar { color: #b71c1c; border-color: #f2b8b8; }
.alerta-informe { border-top: 6px solid #e53935; }
.tarea-hora.nivel-alto { background: #c62828; } .tarea-hora.nivel-medio { background: #f9a825; color: #111; } .tarea-hora.nivel-bajo { background: #2e7d32; }
/* ===== Tablas: barra horizontal siempre visible, encabezado fijo, columnas compactas y ajustables (como Excel) ===== */
.tabla-scroll { overflow: auto; max-height: calc(100vh - 140px); }
.tabla thead th { position: sticky; top: 0; z-index: 3; padding: 8px 10px; }
.tabla td { padding: 6px 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 1.3; }
.tabla td.texto-largo { white-space: pre-wrap; min-width: 300px; max-width: 480px; overflow: visible; }
.tabla td.acciones, .tabla td:has(input, select, textarea, .celda-control) { max-width: none; overflow: visible; }
.tabla td.ajustada { max-width: none; }
.tabla th { position: relative; }
.col-ajuste { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 4; user-select: none; }
.col-ajuste::after { content: ''; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 2px; background: rgba(255,255,255,.25); border-radius: 2px; }
.col-ajuste:hover::after, .col-ajuste.activo::after { background: #ff5252; top: 0; bottom: 0; }
body.ajustando-col, body.ajustando-col * { cursor: col-resize !important; user-select: none !important; }
.tabla-scroll::-webkit-scrollbar { height: 14px; width: 12px; }
.tabla-scroll::-webkit-scrollbar-thumb { background: #b9b9b9; border-radius: 8px; border: 3px solid #f4f4f4; }
.tabla-scroll::-webkit-scrollbar-thumb:hover { background: #8d8d8d; }
.tabla-scroll::-webkit-scrollbar-track { background: #f4f4f4; }
.indicadores-dia .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .indicadores-dia .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .indicadores-dia .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Inicio: tarjeta de tulas con detalle por frente y por banda (Cuarto de selección) */
.kpi-tulas { grid-column: span 2; grid-row: span 2; align-content: start; }
.tulas-frentes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 230px; overflow: auto; }
.tulas-frentes li { border-top: 1px solid var(--borde, #eee); padding-top: 6px; }
.tf-fila { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.tf-fila b { background: #111; color: #fff; border-radius: 999px; padding: 0 9px; font-size: 12px; }
.tf-bandas { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--texto-suave, #555); }
.tf-bandas .sin-banda { font-style: italic; }
@media (max-width: 700px) { .kpi-tulas { grid-column: span 2; grid-row: auto; } }
/* Planeación: tulas por banda */
.conteo { border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; padding: 10px 12px; background: #fafafa; display: grid; gap: 8px; }
.conteo-filas { display: grid; gap: 6px; }
.conteo-fila { display: grid; grid-template-columns: minmax(160px, 1fr) 110px auto; gap: 8px; align-items: center; }
/* Columnas ajustadas a mano: el texto se acomoda al nuevo ancho (encabezado y celdas) */
.tabla th.ajustada, .tabla td.ajustada { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; }
.tabla th.ajustada .th-filtro { display: flex; flex-wrap: wrap; white-space: normal; }
/* Barra horizontal flotante al pie de la ventana (sincronizada con la tabla visible) */
.barra-h-flotante { position: fixed; bottom: 0; height: 18px; overflow-x: auto; overflow-y: hidden; z-index: 60; display: none;
  background: rgba(244, 244, 244, .96); border-top: 1px solid #ddd; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.barra-h-flotante > div { height: 1px; }
.barra-h-flotante::-webkit-scrollbar { height: 14px; }
.barra-h-flotante::-webkit-scrollbar-thumb { background: #9e9e9e; border-radius: 8px; border: 3px solid #f4f4f4; }
.barra-h-flotante::-webkit-scrollbar-thumb:hover { background: #757575; }

/* Dashboard: reporte de frentes para WhatsApp (core/reporte-frentes.js) */
.reporte-frentes .botones .btn[disabled] { opacity: .45; cursor: not-allowed; }
.rf-estado { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.rf-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #f1f2f4; color: #1f2937; font-size: 13px; font-weight: 600; }
.rf-chip.ok { background: #dcfce7; color: #166534; }
.rf-chip.aviso { background: #fef9c3; color: #854d0e; }
.rf-chip.cambio { background: #fee2e2; color: #991b1b; }
.rf-vista { display: flex; justify-content: center; background: #e9eaed; border-radius: 12px; padding: 14px; }
.rf-lienzo { width: 100%; max-width: 560px; height: auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.rf-texto { margin-top: 10px; }
.varios { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.varios-filas { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.varios-fila { display: flex; gap: 6px; align-items: center; }
.varios-fila input { flex: 1; min-width: 0; }
#menu a.submenu { padding-left: 34px; font-size: .92em; }

/* ---------- Programación de la mina (modules/programacion) ---------- */
.pm-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #F3F4F6; border: 1px solid var(--borde); font-size: var(--t-sm); }
.pm-chip.ok { background: #E8F5E9; border-color: #A5D6A7; color: #1B5E20; font-weight: 700; }
.pm-chip.off { background: #F5F5F5; color: #616161; }
.pm-chip.aviso { background: #FFF4E5; border-color: #F5A524; color: #8A4B00; }
.pm-corte { margin: 12px 0 4px; padding: 10px 14px; border-left: 4px solid var(--ssc-rojo, #E31B23); background: #FFF; border-radius: 8px; }
.pm-info h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pm-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
@media (max-width: 700px) { .pm-bloques { grid-template-columns: 1fr; } }
.pm-bloque h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.pm-n { background: var(--ssc-negro, #111); color: #fff; border-radius: 999px; padding: 0 9px; font-size: 12px; }
.pm-tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-tabla tr.pm-falta td { color: #8B1A1A; background: #FFF5F5; }
.pm-estado { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pm-estado.ok { background: #E8F5E9; color: #1B5E20; }
.pm-estado.off { background: #EEEEEE; color: #616161; }
.pm-pagina { font-weight: 700; margin: 14px 0 6px; }
.pm-grid { border-collapse: collapse; font-size: 11px; background: #fff; min-width: 900px; }
.pm-grid td { border: 1px solid #C9CCD1; padding: 3px 6px; white-space: nowrap; }
.pm-grid td.tit { background: #DDEFD9; font-weight: 700; text-align: center; }
.pm-grid td.sec { background: #C6E0B4; font-weight: 700; text-align: center; color: #B00020; }
.pm-bloque .pm-tabla td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.pm-bloque .pm-tabla td:first-child { white-space: nowrap; }

/* Control de producción: foto de la tula y tarjeta de WhatsApp */
.foto-campo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foto-btn { position: relative; overflow: hidden; cursor: pointer; }
.foto-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-prev { max-width: 280px; max-height: 220px; border-radius: 10px; border: 2px solid var(--borde); object-fit: cover; }
.foto-grande { display: block; max-width: 100%; max-height: 70vh; margin: 12px auto 0; border-radius: 10px; }
.tarjeta-prev { display: block; max-width: 100%; max-height: 52vh; margin: 8px auto 12px; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
/* Control de producción: seguimiento del proceso de cada tula */
.prod-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.prod-cifra { background: var(--ssc-gris-100); border-radius: 10px; padding: 10px 12px; }
.prod-cifra b { display: block; font-size: 1.5rem; } .prod-cifra span { font-size: 12.5px; color: var(--texto-suave); }
.prod-cifra.fin { background: #dcfce7; } .prod-cifra.fin b { color: #166534; }
.prod-pasos { display: flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.prod-barra { display: inline-flex; gap: 3px; } .prod-barra i { width: 16px; height: 8px; border-radius: 4px; background: #e3e5e9; }
.prod-barra i.hecho { background: var(--ssc-rojo); } .prod-pasos.fin .prod-barra i { background: #0b7a3b; } .prod-pasos.fin { color: #0b7a3b; }
.tula-fija { font-weight: 700; padding: 10px 12px; background: var(--ssc-gris-100); border-radius: 8px; }

/* Informes: nivel de criticidad (semáforo) y repositorio videográfico con plazo de 3 días */
.nivel-chip { display: inline-block; min-width: 64px; text-align: center; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 3px 10px; color: #fff; }
.nivel-chip.nivel-alto { background: #c62828; }
.nivel-chip.nivel-medio { background: #f9c825; color: #111; }
.nivel-chip.nivel-bajo { background: #2e7d32; }
.nivel-chip.nivel-naranja { background: #ef6c00; }
.video-semaforo { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; border-radius: 8px; padding: 6px 10px; min-width: 190px; border-left: 5px solid; }
.video-semaforo.ok { background: #e3f4e6; border-color: #2e7d32; color: #1b5e20; }
.video-semaforo.pend { background: #fde4e4; border-color: #c62828; color: #8e1b1b; }
.video-semaforo.vencido { background: #c62828; border-color: #7f0000; color: #fff; }
.video-estado { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.video-plazo { font-size: 12px; font-weight: 600; white-space: nowrap; }
.video-semaforo .btn { margin-top: 2px; }
.video-semaforo .btn-video { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.video-semaforo.vencido .btn.secundario { color: #fff; border-color: #fff; }

/* Login: cumplimiento del horario (modules/login) */
.lg-reglas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lg-reglas span { background: #f2f2f2; color: #222; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.lg-reglas .lg-r-desc { background: #fff4d6; color: #8a5a00; } .lg-reglas .lg-r-ret { background: #fde4e4; color: #b71c1c; }
.lg-barra { position: relative; height: 22px; min-width: 200px; background: #eee; border-radius: 6px; overflow: hidden; }
.lg-barra .lg-relleno { position: absolute; inset: 0 auto 0 0; background: #2e7d32; }
.lg-barra.descargos .lg-relleno { background: #f9a825; } .lg-barra.retiro .lg-relleno { background: #c62828; }
.lg-barra .lg-marca { position: absolute; top: 0; bottom: 0; width: 2px; background: #333; opacity: .45; }
.lg-barra b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 22px; color: #111; }
.lg-barra.retiro b { color: #fff; }
.lg-estado { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lg-estado.ok { background: #e3f4e6; color: #1b5e20; } .lg-estado.tarde { background: #fde4e4; color: #b71c1c; }
.lg-estado.ausente { background: #333; color: #fff; } .lg-estado.fuera { background: #e8eefc; color: #1f3d8a; }
.lg-menos { color: #b71c1c; }
.lg-nivel { display: inline-block; border-radius: 6px; padding: 2px 9px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.lg-nivel.normal { background: #e3f4e6; color: #1b5e20; } .lg-nivel.descargos { background: #f9c825; color: #111; } .lg-nivel.retiro { background: #c62828; color: #fff; }
.lg-alertas { border-left: 5px solid #c62828; }
.lg-alerta.gestionada { opacity: .6; }
tr.lg-fila-tarde td { background: #fff5f5; } tr.lg-fila-ausente td { background: #f4f4f4; }

/* Programación (padre) y Programación SOC */
.pr-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pr-acceso { display: block; text-decoration: none; color: inherit; border-top: 4px solid #c62828; }
.pr-acceso:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.pr-icono { font-size: 34px; }
.pr-turno { margin-right: 18px; font-weight: 600; }
.ps-leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.ps-cod { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.ps-scroll { max-height: 70vh; }
.ps-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.ps-grid th, .ps-grid td { border-bottom: 1px solid #e6e6e6; border-right: 1px solid #f0f0f0; text-align: center; padding: 0; }
.ps-grid thead th { position: sticky; top: 0; background: #111; color: #fff; z-index: 2; padding: 4px 0; min-width: 30px; font-weight: 600; }
.ps-grid thead th small { display: block; font-size: 10px; opacity: .7; }
.ps-grid thead th.fin { background: #333; } .ps-grid thead th.hoy { background: #c62828; }
.ps-grid .ps-nom { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 4px 10px; min-width: 230px; white-space: nowrap; font-size: 12.5px; }
.ps-grid thead .ps-nom { background: #111; z-index: 3; }
/* Fila del OMT con la sesión abierta: pintada de rojo SSC (los códigos M/T/N… conservan su color) */
.ps-grid tr.ps-mio .ps-nom { background: var(--ssc-rojo, #FF0707); color: #fff; font-weight: 700; }
.ps-grid tr.ps-mio .ps-nom b { color: #fff; }
.ps-grid tr.ps-mio td.ps-c { box-shadow: inset 0 2px 0 var(--ssc-rojo, #FF0707), inset 0 -2px 0 var(--ssc-rojo, #FF0707); }
.ps-grid tr.ps-mio td.vacia, .ps-grid tr.ps-mio td.ps-tot { background: rgba(255, 7, 7, .14); }
.ps-grid td.ps-c { height: 28px; min-width: 30px; font-weight: 700; position: relative; }
.ps-grid td.vacia { color: #bbb; } .ps-grid td.fin.vacia { background: #fafafa; }
.ps-grid td.hoy { box-shadow: inset 0 0 0 2px #c62828; }
.ps-grid td.clic { cursor: pointer; } .ps-grid td.clic:hover { outline: 2px solid #111; outline-offset: -2px; }
.ps-grid td.pend::after { content: '⏳'; position: absolute; top: -2px; right: 0; font-size: 9px; }
.ps-grid .ps-obs { position: absolute; bottom: 2px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #111; }
.ps-grid .ps-tot { min-width: 28px; background: #f6f6f6; font-weight: 700; }
.ps-grid thead .ps-tot { background: #222; }
.ps-grid tr.ps-cob td { font-weight: 700; background: #fafafa; }
.ps-grid tr.ps-cob td.bajo { background: #fde4e4; color: #b71c1c; } .ps-grid tr.ps-cob td.alto { background: #fff4d6; color: #8a5a00; } .ps-grid tr.ps-cob td.ok { color: #1b5e20; }
.c-M { background: #fff3b0; color: #6b5300; } .c-T { background: #ffd59e; color: #7a3d00; } .c-N { background: #2c3e8f; color: #fff; }
.c-AM { background: #fff9d6; color: #6b5300; box-shadow: inset 0 0 0 2px #e0c341; } .c-AT { background: #ffe8c7; color: #7a3d00; box-shadow: inset 0 0 0 2px #e59a3c; }
.c-AN { background: #5867b0; color: #fff; box-shadow: inset 0 0 0 2px #1d2a66; }
.c-X { background: #e2e2e2; color: #444; } .c-VAC { background: #c8e6c9; color: #1b5e20; } .c-INC { background: #f8bbd0; color: #880e4f; }
.c-LR, .c-LNR, .c-CAL { background: #e1bee7; color: #4a148c; } .c-ID { background: #b2ebf2; color: #00565f; }
.ps-omt-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 10px; max-height: 300px; overflow: auto; border: 1px solid #e6e6e6; border-radius: 8px; padding: 6px 8px; }
.ps-check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; line-height: 1.2; padding: 3px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.ps-check:hover { background: #f5f5f5; }
.ps-check input[type=checkbox] { width: 14px; height: 14px; min-width: 14px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--ssc-rojo, #FF0707); cursor: pointer; }
.ps-check b { min-width: 22px; text-align: right; flex: 0 0 auto; }
.ps-check span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-check.sel { background: rgba(255, 7, 7, .08); color: var(--ssc-rojo, #FF0707); }
.ps-check.sel b { color: var(--ssc-rojo, #FF0707); }
.ps-check.todos { grid-column: 1 / -1; font-weight: 700; border-bottom: 1px solid #eee; border-radius: 0; margin-bottom: 2px; }
.ps-check.todos small { font-weight: 400; color: #777; margin-left: 6px; }
.ps-grid .ps-gap { min-width: 14px; width: 14px; background: transparent !important; border: 0 !important; }
.ps-grid thead th.ps-gap { background: transparent !important; }
.ps-grid tr.ps-sep td { height: 14px; background: transparent; border: 0; padding: 0; }
.ps-grid tr.ps-cob td:not(.ps-gap):not(.ps-nom) { border-top: 0; }
.ps-dias { display: flex; gap: 6px; flex-wrap: wrap; }

/* Listas desplegables con buscador (core/select-buscable.js) */
.sb-panel { position: fixed; z-index: 10000; background: #fff; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; max-width: min(560px, calc(100vw - 16px)); }
.sb-panel .sb-buscar { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; min-height: 0; font-size: 14px; }
.sb-lista { list-style: none; margin: 0; padding: 0; overflow: auto; }
.sb-lista li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.sb-lista li.activo { background: rgba(255, 7, 7, .09); }
.sb-lista li.elegido { font-weight: 700; color: var(--ssc-rojo, #FF0707); }
.sb-lista li.deshab { color: #aaa; cursor: default; }
.sb-lista li.sb-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #777; cursor: default; padding-top: 10px; }
.sb-lista li.sb-vacio { color: #777; cursor: default; }

/* Filtro por turno (Todos · Mañana · Tarde · Noche) en las tablas de los módulos */
.filtro-turno { margin-top: 6px; }
.filtro-turno .chip-turno { font-weight: 600; }
.tarj-alertas { padding-left: 12px; margin: 10px 0 14px; }

/* Programación SOC: personal retirado (fecha de egreso en Personal OMT) */
.ps-ret { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: #6b6b6b; border-radius: 999px; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }
.ps-grid tr.ps-retirado .ps-nom { background: #efefef; color: #777; }
.ps-grid tr.ps-retirado .ps-nom b { text-decoration: line-through; }
.ps-grid td.fuera { background: repeating-linear-gradient(135deg, #ededed 0 4px, #f8f8f8 4px 8px) !important; color: #999 !important; }
.ps-grid td.fuera[class*=" c-"] { text-decoration: line-through; }
.ps-check.retirado { color: #888; }
.ps-check.retirado span { text-decoration: line-through; }
.ps-check.retirado .ps-ret { margin-left: auto; }

.ps-retirados { margin-top: 10px; }
.ps-ret-det { border: 1px solid #e0e0e0; border-radius: 8px; padding: 6px 10px; background: #fafafa; }
.ps-ret-det summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.ps-ret-det summary small { font-weight: 400; color: #777; }
.ps-ret-det tr.sel td { background: rgba(255, 7, 7, .06); }
.ps-ret-det input[type=checkbox] { width: 14px; height: 14px; min-height: 0; accent-color: var(--ssc-rojo, #FF0707); }
.ps-ret-alerta { color: #b71c1c; font-weight: 700; }

/* Extensiones: libreta interna SOC */
.ext-libreta { border-top: 4px solid var(--ssc-rojo, #FF0707); }
.ext-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.ext-lib-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: #111; color: #fff; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; min-height: 0; }
.ext-lib-tarjeta:hover { outline: 2px solid var(--ssc-rojo, #FF0707); }
.ext-lib-tarjeta small { color: #ff8a8a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.ext-lib-tarjeta .ext-lib-num { font-size: 28px; line-height: 1.1; color: #fff; }
.ext-lib-tarjeta span { font-size: 12.5px; color: #ddd; }
.ext-lib-tarjeta em { font-size: 11.5px; color: #aaa; }
.ext-lib-tarjeta .ext-lib-mod { font-size: 11px; color: #999; }
.ext-lib-tarjeta.vacia { background: #f3f3f3; color: #777; } .ext-lib-tarjeta.vacia .ext-lib-num { color: #bbb; } .ext-lib-tarjeta.vacia span { color: #888; }

/* Fila seleccionada en cualquier tabla (core/fila-seleccion.js): rojo SSC */
table tbody tr { cursor: default; }
table tbody tr.fila-sel > td { background: rgba(255, 7, 7, .12) !important; }
table tbody tr.fila-sel > td:first-child { box-shadow: inset 4px 0 0 var(--ssc-rojo, #FF0707); }

.ext-lib-tarjeta.solo-ver { cursor: default; } .ext-lib-tarjeta.solo-ver:hover { outline: none; }

/* Borrador recuperado en un formulario (core/formularios.js) */
.borrador-aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: #fff4d6; border-left: 4px solid var(--ssc-rojo, #FF0707); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 13.5px; }
/* Informe de actividades iniciales: estado de cada puesto del turno */
.ia-puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.ia-puesto { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb; border-left: 5px solid #9ca3af; background: #fff; }
.ia-puesto small { color: #6b7280; min-height: 1.2em; }
.ia-puesto .ia-est { font-weight: 600; font-size: 13px; }
.ia-puesto.ok { border-left-color: #16a34a; } .ia-puesto.ok .ia-est { color: #166534; }
.ia-puesto.pend { border-left-color: #E31B23; } .ia-puesto.pend .ia-est { color: #b3121a; }
.ia-puesto.fuera { opacity: .6; }
.ia-listo { background: #dcfce7; color: #166534; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
/* Informes: contador del proceso desde el envío del correo hasta la respuesta «proceso finalizado» */
.seg-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.seg-chip.corre { background: #fff4e5; color: #9a3412; }
.seg-chip.vencido { background: #fee2e2; color: #991b1b; }
.seg-chip.ok { background: #dcfce7; color: #166534; }
.seg-chip.pend { background: #f1f2f4; color: #374151; }
.seg-resp { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.seg-resp li { padding: 8px 12px; border-radius: 8px; background: #f8f9fa; border-left: 4px solid #9ca3af; }
.seg-resp li.fin { border-left-color: #16a34a; background: #f0fdf4; }
/* Extensiones: registros duplicados (arriba) */
.ext-dup { border-left: 5px solid #E31B23; }
.ext-dup-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; margin-top: 10px; }
.ext-dup-grupo { border: 1px solid #f3c2c4; border-radius: 10px; padding: 8px 10px; background: #fff7f7; }
.ext-dup-tit { font-size: 13px; color: #7f1d1d; margin-bottom: 4px; }
.ext-dup-grupo .tabla { margin: 0; }
.ext-lib-chip { color: #6b7280; font-weight: 600; white-space: nowrap; }
/* Programación mina: provisional reenviada que se toma como definitiva */
.pm-def-reenvio { background: #dcfce7; color: #166534; padding: 8px 12px; border-radius: 8px; font-weight: 600; margin: 6px 0; }
/* Programación SOC: doble turno en una misma celda (p. ej. M+T) */
.ps-grid td.ps-c.doble { padding: 0; background: none; }
.ps-doble { display: flex; flex-direction: column; height: 100%; min-height: 28px; font-size: 11px; line-height: 1; }
.ps-doble > span { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Planner · Pendientes del SOC (automáticos) */
.pa-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.pa-kpi { background: #f4f5f7; border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; min-width: 110px; }
.pa-kpi b { font-size: 22px; } .pa-kpi span { font-size: 12px; color: #6b7280; }
.pa-kpi.rojo { background: #fee2e2; } .pa-kpi.rojo b { color: #b3121a; }
.tablero-auto .columna.col-hecho { opacity: .85; }
.tj-auto { border-left: 4px solid #9ca3af; cursor: pointer; }
.tj-auto.vencida { border-left-color: #E31B23; background: #fff5f5; }
.tj-auto .tj-tipo { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.tj-auto .tj-nota { background: #fff7e6; border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.tj-auto .tj-hecho { color: #166534; font-size: 13px; font-weight: 600; }
.tj-auto .tj-ir { font-size: 12px; color: #b3121a; text-decoration: none; font-weight: 600; }
.tj-auto em.vencida { color: #b3121a; font-weight: 700; }
/* Versión móvil (celular / APK) del OMT: mi programación y mis solicitudes */
.pm-mov-btn { width: 100%; padding: 14px; font-size: 16px; }
.pm-mov-tot { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.pm-mov-tot span { background: #f4f5f7; border-radius: 8px; padding: 6px 10px; }
.pm-mov-dias, .pm-mov-sols { list-style: none; padding: 0; margin: 0; }
.pm-mov-dias li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid #eef0f2; }
.pm-mov-dias li.fin { background: #fafafa; }
.pm-mov-dias li.hoy { background: #fff5f5; border-left: 4px solid #E31B23; padding-left: 8px; }
.pm-mov-fecha { min-width: 120px; } .pm-mov-fecha b { font-size: 17px; }
.pm-mov-cod { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-mov-dias small { width: 100%; color: #6b7280; }
.pm-mov-sols li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #eef0f2; }
@media (max-width: 700px) { #app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } #cabecera { flex-wrap: wrap; gap: 6px; padding: 8px 10px; } #cabecera img { height: 40px; }
  #zonaUsuario { flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .contador-turno { font-size: 12px; padding: 4px 10px; }
  #zonaUsuario .usuario, #indicador { display: none; } #contenido { padding: 10px; } }