/* ══════════════════════════════════════════════════════════════════════════
   TEATRO · con el sistema visual común (29/09/2026)
   La cabecera es la de todas las áreas (banda · pestañas · filtros, piezas
   .sis-* de 16-sistema.css). Lo único propio es EL CARTEL (tablero SisFirma):
   fondo de color, marco interior con filete oro y la chapa de nota. Fuera el
   telón granate, la cabecera editorial y los colores de la casa que
   duplicaban los del sistema: el granate es ya var(--area).

   Sin «.tea button{font:inherit}»: ese inherit ganaba por especificidad a las
   piezas comunes (el chip del filtro, el desplegable de tipo…) y les cambiaba
   la letra. El inherit de los controles ya lo pone 01-base.css.
   ══════════════════════════════════════════════════════════════════════════ */
.tea{ --tea-oro:#C9A24A; color:var(--tx); padding-bottom:28px }

/* La columna principal: pestañas, filtros y carteles, con el hueco del .sis-col */
.sis-col.tea-principal{ gap:12px }
.tea-principal > .sis-pestanas, .tea-principal > .sis-filtros{ margin:0 }
/* Lo secundario va a la derecha en escritorio; en el móvil sobra (la próxima
   función ya sale en la banda) y alargaría la página. */
@media (max-width:899px){ .sis-col.tea-lateral{ display:none } }

/* ── La rejilla de carteles ──
   Dos por fila en el móvil; en escritorio, tantos como quepan de ~172 px:
   cuatro en una pantalla de 1440 con la columna derecha, sin la media
   tarjeta en blanco de antes. */
.tea-rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px }
@media (min-width:900px){ .tea-rejilla{ grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:18px 14px } }

.tea-tarjeta{
  display:flex; flex-direction:column; gap:8px; min-width:0; padding:0; border:0; background:none;
  color:inherit; text-align:left; cursor:pointer;
}
.tea-tarjeta .tea-cartel{ transition:transform .16s, box-shadow .16s }
.tea-tarjeta:hover .tea-cartel{ transform:translateY(-2px); box-shadow:var(--sombra-2) }
.tea-tarjeta:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:var(--r-m) }

/* ── El cartel (pieza propia) ── */
.tea-cartel{
  --tea-fondo:var(--area);
  height:176px; box-sizing:border-box; padding:6px; border-radius:var(--r-m); background:var(--tea-fondo);
}
/* Seis fondos para que la rejilla tenga ritmo (colorCartel, logica.ts). Son
   del cartel y solo del cartel: el primero es el propio color del área. */
.tea-cartel.c-1{ --tea-fondo:#2B3A4F } .tea-cartel.c-2{ --tea-fondo:#4A3B2F }
.tea-cartel.c-3{ --tea-fondo:#1F4A45 } .tea-cartel.c-4{ --tea-fondo:#3A2F3E }
.tea-cartel.c-5{ --tea-fondo:#5B3A22 }
.tea-cartel-marco{
  position:relative; height:100%; box-sizing:border-box; overflow:hidden;
  border:1px solid var(--tea-oro); border-radius:var(--r-s); padding:10px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:6px; color:#FFF;
}
/* El cartel de verdad llena el marco; el filete oro (el borde) queda encima y
   un degradado deja leer el título sobre cualquier imagen. */
.tea-cartel-marco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.tea-cartel-marco.con-img::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(19,28,42,.88), rgba(19,28,42,.12) 58%, rgba(19,28,42,.4));
}
.tea-cartel-marco > :not(img){ position:relative; z-index:2 }
.tea-cartel-sobre{
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-mono); font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--tea-oro);
}
.tea-cartel strong{
  font-family:var(--f-tit); font-weight:800; font-size:16px; line-height:1.1; letter-spacing:-.01em; text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tea-cartel-hueco{ height:22px }
.tea-cartel.grande{ width:100%; max-width:300px; height:auto; aspect-ratio:3/4; padding:8px; align-self:start }
.tea-cartel.grande .tea-cartel-marco{ padding:16px }
.tea-cartel.grande .tea-cartel-sobre{ font-size:10px }
.tea-cartel.grande strong{ font-size:26px; -webkit-line-clamp:5 }

/* ── Debajo del cartel: fecha, sala y quién fue ── */
.tea-tarjeta-info{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:0 2px }
.tea-tarjeta-fecha{ font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--area) }
.tea-tarjeta-fecha.reserva{ color:var(--aviso-tx) }
.tea-tarjeta-sala{ font-size:12.5px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tea-tarjeta-pie{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:22px; margin-top:4px }
.tea-asistentes{ display:flex; align-items:center; gap:3px }
.tea-asistentes i{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--tx); color:#FFF; font-family:var(--f-txt); font-size:10px; font-weight:700; font-style:normal;
}

/* ── Columna derecha ── */
.sis-caja.tea-caja-proxima{ border-top:3px solid var(--area) }
.tea-proxima{ display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer }
.tea-proxima b{ font-family:var(--f-tit); font-weight:800; font-size:18px; line-height:1.15; letter-spacing:-.01em }
.tea-proxima span{ font-size:12.5px; color:var(--tx2) }
.tea-proxima:hover b{ text-decoration:underline; text-underline-offset:3px }

/* ── Archivadas ── */
.tea-archivadas summary{
  cursor:pointer; padding:6px 2px;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.tea-archivada{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding:6px 8px 6px 12px;
  background:var(--sup); border:1px dashed var(--borde); border-radius:var(--r-m); font-size:13px;
}
/* Apagado, como manda el sistema: 55 %. El botón no, que se tiene que ver. */
.tea-archivada > span{ opacity:.55 }

/* ── Volver (ficha y formulario) ── */
.tea-volver{ margin:0 0 10px }

/* ── La ficha de una función ── */
.tea-ficha{
  display:grid; grid-template-columns:minmax(200px,300px) minmax(0,1fr); gap:28px; max-width:980px; box-sizing:border-box;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:22px;
}
.tea-ficha-texto{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.tea-ficha h2{ margin:4px 0 0; font-family:var(--f-tit); font-weight:800; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.05; letter-spacing:-.02em }
.tea-ficha-lugar{ margin:0 0 10px; color:var(--tx2) }
.tea-ficha dl{ align-self:stretch; margin:0; border-top:1px solid var(--borde-s) }
.tea-ficha dl div{ display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--borde-s) }
.tea-ficha dt{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.tea-ficha dd{ margin:0; font-size:14px; font-weight:600 }
.tea-tipo-directo select{
  min-width:180px; height:var(--h-s); box-sizing:border-box; padding:0 10px; cursor:pointer;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx); font-size:13px; font-weight:600;
}
.tea-tipo-directo select:focus{ border-color:var(--tx); outline:none }
.tea-tipo-directo small{ margin-left:8px; color:var(--tx3); font-size:12px; font-weight:400 }
.tea-ficha-notas{
  align-self:stretch; margin:8px 0 0; padding:11px 13px; white-space:pre-wrap; font-size:14px; line-height:1.5;
  background:var(--sup2); border-left:3px solid var(--tea-oro); border-radius:0 var(--r-s) var(--r-s) 0;
}
.tea-acciones{ align-self:stretch; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.tea-acciones .tea-borrar{ margin-left:auto }

/* ── El formulario: campos del sistema y Cancelar a la izquierda de Guardar ── */
.tea-form{
  max-width:680px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:22px;
}
.tea-form h2{ margin:0 0 2px; font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.02em }
.tea-form label{
  display:flex; flex-direction:column; gap:6px; margin:0;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.tea-form input:not([type=checkbox]), .tea-form select, .tea-form textarea{
  width:100%; height:var(--h-m); box-sizing:border-box; padding:0 12px;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px; font-weight:400; letter-spacing:0; text-transform:none;
}
.tea-form textarea{ height:auto; padding:10px 12px; line-height:1.5; resize:vertical }
.tea-form input:focus, .tea-form select:focus, .tea-form textarea:focus{ border-color:var(--tx); outline:none }
.tea-form-dos{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.tea-ayuda{ margin:-4px 0 0; font-size:12.5px; color:var(--tx2) }
/* Los checkbox de verdad, con aspecto limpio: su casilla nativa en tinta. */
.tea-personas{ margin:0; padding:8px 12px 12px; border:1px solid var(--borde-s); border-radius:var(--r-m); display:flex; flex-wrap:wrap; gap:8px 20px }
.tea-personas legend{ padding:0 4px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.tea-personas label{ flex-direction:row; align-items:center; gap:8px; cursor:pointer; font-family:var(--f-txt); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--tx) }
.tea-personas input{ width:18px; height:18px; margin:0; accent-color:var(--tx); cursor:pointer }
.tea-form .sis-aviso{ margin:0 }
.tea-form .sis-acciones{ margin-top:4px }

@media (max-width:899px){
  .tea-cartel{ height:160px }
  .tea-cartel strong{ font-size:15px }
  .tea-ficha{ grid-template-columns:1fr; gap:18px; padding:16px }
  .tea-cartel.grande{ max-width:230px; justify-self:center }
  .tea-form{ padding:16px }
  .tea-form-dos{ grid-template-columns:1fr }
}