/* Taquilla Feliz v2 · CRM maestro (/admin/crm). Va encima de /admin/admin.css (oscuro, acento magenta #E8479E):
   aquí el tema claro, el tablero, el evento, clientes y la gráfica. Móvil primero (360 px sin desbordarse).
   Tema: el del sistema (prefers-color-scheme) salvo que la persona elija uno con el botón (html[data-tema]). */

/* ---------- tema claro: por el sistema (si no eligió oscuro) o elegido */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --acento: #d63c8e; --acento-2: #b02c72; --acento-texto: #ffffff;
    --fondo: #f6f4f8; --sup: #ffffff; --sup-2: #f1edf5; --sup-3: #e7e1ee;
    --texto: #17121c; --tenue: #5d566c; --linea: rgba(23, 18, 28, .13);
    --ok: #0f7d56; --aviso: #9a5a00; --error: #c42a45;
    --crm-barra: rgba(246, 244, 248, .94); --crm-campo: #ffffff; --crm-etiqueta: #3b3447; --crm-hundido: #f1edf5;
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --acento: #d63c8e; --acento-2: #b02c72; --acento-texto: #ffffff;
  --fondo: #f6f4f8; --sup: #ffffff; --sup-2: #f1edf5; --sup-3: #e7e1ee;
  --texto: #17121c; --tenue: #5d566c; --linea: rgba(23, 18, 28, .13);
  --ok: #0f7d56; --aviso: #9a5a00; --error: #c42a45;
  --crm-barra: rgba(246, 244, 248, .94); --crm-campo: #ffffff; --crm-etiqueta: #3b3447; --crm-hundido: #f1edf5;
  color-scheme: light;
}
:root, :root[data-tema="oscuro"] {
  --crm-barra: rgba(12, 10, 18, .92); --crm-campo: #0f0d16; --crm-etiqueta: #d9d4e3; --crm-hundido: #0f0d16;
}
:root[data-tema="oscuro"] {
  --acento: #E8479E; --acento-2: #c2337f; --acento-texto: #16060f;
  --fondo: #0c0a12; --sup: #15121d; --sup-2: #1d1928; --sup-3: #262136;
  --texto: #f6f3f8; --tenue: #aaa3b8; --linea: rgba(255, 255, 255, .12);
  --ok: #3ddc97; --aviso: #ffb547; --error: #ff6b80;
  color-scheme: dark;
}
/* lo que admin.css fija con colores sueltos */
.barra { background: var(--crm-barra); }
input, select, textarea { background: var(--crm-campo); }
.campo > span { color: var(--crm-etiqueta); }
.b1:hover { background: var(--acento-2); }
.t-ok, .t-aviso, .t-mal, .t-acento { font-weight: 700; }

/* ---------- armazón (nada se recorta a lo ancho: lo largo se parte y las tablas se desplazan dentro de su caja) */
.barra-in { min-width: 0; }
.marca { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.quien { flex: none; }
#crm-tema { min-width: 38px; justify-content: center; padding: 6px 10px; font-size: 16px; }
main#crm { padding-top: 16px; }
main#crm > section { min-width: 0; }
.crm-pendiente { padding: 24px 0; }
h1.crm-titulo { font-size: 22px; overflow-wrap: anywhere; }
.crm-sub { color: var(--tenue); margin: 4px 0 0; overflow-wrap: anywhere; }
.crm-seccion { margin-top: 22px; }
.crm-seccion > h2 { margin-bottom: 8px; }
.crm-nota { color: var(--tenue); font-size: 13px; margin: 6px 0 0; }

/* ---------- filtros y KPIs */
.crm-filtros { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
.crm-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tenue);
  min-width: 0; }
.crm-filtros select, .crm-filtros input { min-width: 0; }
.crm-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.crm-kpis .kpi { padding: 12px 14px; min-width: 0; }
.crm-kpis .kpi b { font-size: 24px; overflow-wrap: anywhere; }
.crm-kpis .kpi small { overflow-wrap: anywhere; }
.crm-arriba { color: var(--ok); }
.crm-abajo { color: var(--error); }

/* ---------- tarjetas del tablero */
.crm-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.crm-tarjeta { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-tarjeta h3 { margin: 2px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.crm-tarjeta h3 a { color: var(--texto); text-decoration: none; }
.crm-tarjeta h3 a:hover, .crm-tarjeta h3 a:focus-visible { color: var(--acento); text-decoration: underline; }
.crm-tarjeta small { color: var(--tenue); overflow-wrap: anywhere; }
.crm-cab { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crm-barra { height: 8px; border-radius: 99px; background: var(--sup-3); overflow: hidden; display: flex; }
.crm-barra i { display: block; height: 100%; background: var(--acento); }
.crm-barra i.cortesia { background: var(--aviso); opacity: .75; }
.crm-barra i.reservado { background: var(--tenue); opacity: .45; }
.crm-cifra { margin: 0; font-size: 15px; }
.crm-cifra b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.crm-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px;
  color: var(--tenue); }
.crm-mini b { color: var(--texto); }
.crm-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.crm-alertas li { font-size: 13px; padding: 5px 9px; border-radius: 8px; border-left: 3px solid var(--tenue);
  background: var(--sup-2); overflow-wrap: anywhere; }
.crm-alertas li.grave { border-color: var(--error); }
.crm-alertas li.aviso { border-color: var(--aviso); }
.crm-alertas li.info { border-color: var(--tenue); }
.crm-tarjeta .acciones { margin-top: auto; padding-top: 4px; }
.crm-serie { grid-column: 1 / -1; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio); }
.crm-serie > summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  list-style: none; }
.crm-serie > summary::-webkit-details-marker { display: none; }
.crm-serie > summary::before { content: '▸'; color: var(--acento); }
.crm-serie[open] > summary::before { content: '▾'; }
.crm-serie > .crm-lista { padding: 0 12px 12px; }
.crm-paginas { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ---------- evento */
.crm-evento-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.crm-evento-cab > div { min-width: 0; }
.crm-grafica { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; }
.crm-grafica svg { display: block; width: 100%; height: auto; }
.crm-grafica .g-int { fill: var(--acento); }
.crm-grafica .g-ext { fill: var(--aviso); opacity: .8; }
.crm-grafica .g-acum { fill: none; stroke: var(--texto); stroke-width: 2; opacity: .75; }
.crm-grafica .g-proy { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 5 4; }
.crm-grafica .g-eje { stroke: var(--linea); stroke-width: 1; }
.crm-grafica text { fill: var(--tenue); font: 600 10px var(--fuente); }
.crm-leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--tenue); margin: 8px 2px 0; }
.crm-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.crm-leyenda .l-int { background: var(--acento); }
.crm-leyenda .l-ext { background: var(--aviso); }
.crm-leyenda .l-proy { background: var(--ok); }
.crm-frescura { font-size: 13px; color: var(--tenue); margin: 0; overflow-wrap: anywhere; }
.crm-tabla table { min-width: 560px; }
.crm-tabla td, .crm-tabla th { white-space: nowrap; }
.crm-tabla td:first-child { white-space: normal; min-width: 120px; }
.crm-pendiente-corte { color: var(--aviso); }

/* mapa de estados (respaldo hasta que plano-svg.js tenga su modo «estado») */
.crm-mapa { overflow-x: auto; padding: 12px 8px; background: var(--crm-hundido); border: 1px solid var(--linea);
  border-radius: 12px; margin-top: 8px; }
.crm-mapa .p-fila { margin-bottom: 3px; }
.crm-mapa .butaca { width: 18px; height: 18px; font-size: 8px; border-radius: 4px; }
.butaca.e-vendido { background: var(--acento); color: var(--acento-texto); border-color: transparent; }
.butaca.e-cortesia { background: var(--aviso); color: #1a1205; border-color: transparent; }
.butaca.e-apartado { background: transparent; border: 2px solid var(--acento); color: var(--acento); }
.butaca.e-asignado { background: var(--sup-3); border: 2px dashed var(--tenue); color: var(--tenue); }
.butaca.e-bloqueado { background: repeating-linear-gradient(45deg, var(--sup-3) 0 3px, var(--sup-2) 3px 6px); color: var(--tenue); }
.butaca.e-libre { background: var(--sup); color: var(--tenue); border: 1px solid var(--linea); }
.crm-mapa-leyenda .butaca { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ---------- clientes */
.crm-cliente h3 { font-size: 17px; overflow-wrap: anywhere; }
.crm-cliente .chips { margin-top: 8px; }
.crm-cliente .chip, .crm-chips-largos .chip { padding: 4px 10px; white-space: normal; overflow-wrap: anywhere;
  max-width: 100%; min-width: 0; }
.crm-cliente .chip a { color: var(--texto); text-decoration: none; }
.crm-cliente .chip a:hover { color: var(--acento); }

/* ---------- compartir */
.crm-compartir textarea { min-height: 150px; font-family: var(--fuente); }

/* ---------- recintos y layouts (catalogo.js): una línea por dato en la tarjeta; la tabla de versiones a 390 px */
.recinto small.linea { display: block; }
td small.cat-angosto { display: none; }
.renglon label.mini { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: top; }
.renglon label.mini > span { font-size: 12px; color: var(--tenue); }

@media (max-width: 640px) {
  .cat-ancho { display: none; }
  .tabla table.cat-versiones { min-width: 0; }
  td small.cat-angosto { display: block; }
  main#crm { padding-left: 12px; padding-right: 12px; }
  .crm-kpis { grid-template-columns: 1fr 1fr; }
  .crm-kpis .kpi b { font-size: 20px; }
  h1.crm-titulo { font-size: 20px; }
}
@media (max-width: 420px) {
  .marca span { display: none; }
  .barra-in { gap: 8px; }
}
@media print {
  .barra, .acciones, .crm-filtros, .crm-paginas, #crm-tema { display: none !important; }
  body { background: #fff; color: #000; }
}