:root { --rojo: #e10707; --oscuro: #1a1a1a; --gris: #f2f2f2; }
* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #fafafa;
       color: var(--oscuro); min-height: 100vh; }
[hidden] { display: none !important; }
.silencio { color: #777; }
.error { color: var(--rojo); font-weight: 600; }

/* Login */
.login-caja { max-width: 340px; margin: 18vh auto; padding: 24px; text-align: center;
              display: flex; flex-direction: column; gap: 14px; }
.login-caja input { font-size: 22px; text-align: center; padding: 12px; border: 2px solid #ccc;
                    border-radius: 10px; text-transform: uppercase; }

/* Cabecera */
header { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
         background: var(--rojo); color: #fff; position: sticky; top: 0; }
#quien { font-weight: 700; flex: 1; }
.conmutador { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.plano { background: none; border: 1px solid #ffffff88; color: #fff; border-radius: 8px;
         padding: 4px 10px; cursor: pointer; }

/* Pestañas */
nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px; background: #fff;
      border-bottom: 1px solid #ddd; }
nav button { border: none; background: var(--gris); padding: 8px 12px; border-radius: 18px;
             cursor: pointer; white-space: nowrap; font-size: 14px; }
nav button.activa { background: var(--rojo); color: #fff; font-weight: 700; }
.tab { padding: 14px; max-width: 900px; margin: 0 auto; }

/* Botón grande */
.grande { display: block; width: 100%; max-width: 420px; margin: 8vh auto 12px; padding: 26px;
          font-size: 22px; font-weight: 800; border: none; border-radius: 18px; cursor: pointer;
          position: relative; }
.rojo { background: var(--rojo); color: #fff; }
.grande:active { transform: scale(.98); }
.globo { position: absolute; top: -10px; right: -10px; background: #111; color: #fff;
         border-radius: 50%; min-width: 34px; height: 34px; display: flex; align-items: center;
         justify-content: center; font-size: 15px; padding: 0 6px; }
#motivo { text-align: center; }

/* Tarjeta de tarea */
.tarjeta { background: #fff; border: 1px solid #ddd; border-radius: 14px; padding: 16px;
           max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.fila-titulo { display: flex; gap: 8px; }
.chip { background: var(--rojo); color: #fff; border-radius: 12px; padding: 2px 10px;
        font-size: 13px; font-weight: 700; }
.chip.gris { background: #666; }
.cliente { font-size: 17px; }
.acciones-contacto, .acciones-resultado { display: flex; gap: 8px; flex-wrap: wrap; }
.boton { flex: 1; min-width: 120px; text-align: center; padding: 12px; border: none;
         border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
         text-decoration: none; color: #fff; display: inline-block; }
.verde { background: #1a7a3a; } .azul { background: #0b5bd3; }
.gris { background: #666; } .rojo2 { background: var(--rojo); }
details pre { white-space: pre-wrap; background: var(--gris); padding: 10px;
              border-radius: 8px; font-size: 13px; margin-top: 6px; }
#t-nota { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; }

/* Tablas de paneles */
table { border-collapse: collapse; width: 100%; font-size: 14px; background: #fff; }

/* Las tablas del supervisor no caben en un móvil, y Jesús y Kamila trabajan
   desde el móvil. Medido a 390 px de ancho: la Cola se salía 389 px —el DOBLE
   de la pantalla—, Empleados 138 y Conexiones 136, y arrastraban la PÁGINA
   ENTERA de lado: al deslizar para leer una columna se te iba también la
   cabecera y las pestañas.

   Ahora se desliza SOLO la tabla, dentro de su hueco. En el PC no cambia
   nada: `min-width: 100%` la deja igual de ancha que antes. */
.tab table {
  display: block;
  overflow-x: auto;
  min-width: 100%;
  width: max-content;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* Que no se parta el texto en columnas estrechas al poder deslizar. */
.tab table td, .tab table th { white-space: nowrap; }
/* Salvo el título de la tarea y el aviso, que son largos y sí deben partir. */
.tab table td:nth-child(4) { white-space: normal; min-width: 15em; }

/* Y la página, nunca de lado: si algo se sale, es un fallo que hay que ver,
   no algo que el dedo tenga que sortear. */
html, body { overflow-x: hidden; }

/* REGLA GENERAL: todo lo que viene de fuera —nombres de clientes, textos de
   WhatsApp, avisos— se PARTE antes que recortarse.
 
   Como la página ya no se desliza de lado, un texto que se sale queda
   cortado y sin forma de llegar a él. Y los valores reales lo hacen: se
   probó con «COMUNIDADDEPROPIETARIOSCALLEDELACONSTITUCION123…» a 360 px y
   se recortaban el título de la tarea, el nombre del cliente y el globo del
   chat; el nombre en la cabecera del hilo se salía 453 px.
 
   Va en los contenedores y no elemento por elemento, para que valga también
   para lo que se añada mañana. Un dato que no se puede leer es peor que uno
   feo. */
.tab, .tarjeta, #hilo, #tarjeta { overflow-wrap: anywhere; }

/* En un monitor sobra sitio: las tablas anchas (Cola, Conexiones) cabían
   enteras y aun así había que deslizarlas, porque el contenido estaba
   limitado a 900 px. Ese límite es bueno para LEER —una línea de texto muy
   larga cansa— así que solo se ensancha lo que lleva tabla, y solo en
   pantallas grandes. La pantalla del trabajador y la de escribir se quedan
   estrechas, que es como se leen bien.

   Dani, Azahara y Sara trabajan desde el PC; Jesús y Kamila desde el móvil.
   Tiene que estar bien en los dos sitios, no en uno. */
@media (min-width: 1100px) {
  #tab-cola, #tab-conexiones, #tab-empleados, #tab-informe, #tab-midia {
    max-width: 1320px;
  }
}
th { background: var(--rojo); color: #fff; text-align: left; padding: 6px 8px; }
td { border-bottom: 1px solid #eee; padding: 6px 8px; vertical-align: top; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.punto.viva, .punto.fresco { background: #1a7a3a; }
.punto.silenciosa, .punto.viejo, .punto.sin_datos { background: var(--rojo); }
.mini { font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid #bbb;
        background: #fff; cursor: pointer; }
.venc { color: var(--rojo); font-weight: 700; }
.form-linea { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.form-linea input, .form-linea select { padding: 8px; border: 1px solid #ccc; border-radius: 8px; }
.aviso-codigo { background: #fff8e0; border: 1px solid #e0c860; padding: 10px;
                border-radius: 8px; margin: 8px 0; font-weight: 600; }

/* Chats */
.hilo-globos { display: flex; flex-direction: column; gap: 8px; max-height: 50vh;
               overflow-y: auto; padding: 4px 0; }
.globo-chat { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 14px; }
.globo-chat .quien { font-size: 11px; color: #777; margin-bottom: 2px; }
.globo-chat.de-cliente { background: var(--gris); align-self: flex-start; }
.globo-chat.nuestro { background: #d8f0dd; align-self: flex-end; }
#ch-texto { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; }

/* Modo pruebas */
#banda-pruebas { background: #fff3cd; color: #6b5200; border-bottom: 2px solid #e0c860;
                 padding: 8px 14px; font-size: 13px; font-weight: 600; text-align: center; }

/* El aviso completo: se lee de corrido, respeta los saltos de línea del
   mensaje de Telegram y no desborda a lo ancho en el móvil. En pantallas
   bajas se limita la altura para que los botones de resultado no queden
   fuera de vista. */
#t-evidencia {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 46vh;
  overflow-y: auto;
  margin: .4rem 0 0;
  padding: .6rem .7rem;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.45;
  background: #fff;
  border: 1px solid #e6e6e6;
}

/* WhatsApp dentro de la ficha */
#t-wa { margin-top: .8rem; border-top: 1px solid #e6e6e6; padding-top: .6rem; }
#t-wa h3 { margin: 0 0 .4rem; font-size: 1rem; }
#wa-hilo { max-height: 34vh; overflow-y: auto; background: #fff;
           border: 1px solid #e6e6e6; border-radius: 8px; padding: .5rem; }
#wa-hilo p { margin: .25rem 0; padding: .35rem .55rem; border-radius: 10px;
             max-width: 85%; overflow-wrap: anywhere; font-size: .93rem; }
#wa-hilo .de-cliente { background: #f1f1f1; }
#wa-hilo .de-casa { background: #dcf8c6; margin-left: auto; }
#wa-hilo .dudosa { border: 1px dashed var(--rojo); }
#wa-texto { width: 100%; margin-top: .5rem; padding: .5rem; border-radius: 8px;
            border: 1px solid #ccc; font: inherit; box-sizing: border-box; }
.wa-aviso { margin: .4rem 0 0; font-size: .9rem; color: #8a6d00; }

/* Ficha del cliente en la tarjeta */
#t-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           gap: .3rem .8rem; background: #fff; border: 1px solid #e6e6e6;
           border-radius: 8px; padding: .55rem .7rem; margin: .5rem 0 0;
           font-size: .92rem; }
#t-ficha div { overflow-wrap: anywhere; }
#t-ficha b { color: #666; font-weight: 600; }
#t-ficha .alerta { color: var(--rojo); font-weight: 700; }

/* Pantalla partida. Por debajo de 1100px no hay sitio: se apila, que en el
   móvil dos columnas no se leen. */
#partida { display: block; }
#panel { display: none; }
@media (min-width: 1100px) {
  #partida.abierta { display: grid; grid-template-columns: minmax(380px, 1fr) 1fr;
                     gap: .8rem; align-items: start; }
  #partida.abierta #panel { display: flex; flex-direction: column;
                            height: calc(100vh - 150px); position: sticky; top: .5rem; }
}
.panel-barra { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem;
               background: #fff; border: 1px solid #e6e6e6; border-bottom: none;
               border-radius: 8px 8px 0 0; font-size: .9rem; }
.panel-barra a { margin-left: auto; }
#panel-marco { flex: 1; width: 100%; border: 1px solid #e6e6e6; border-radius: 0 0 8px 8px;
               background: #fff; }

/* El panel aloja el correo o la conversación, a toda altura. */
#panel-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0;
                border: 1px solid #e6e6e6; border-top: none;
                border-radius: 0 0 8px 8px; background: #fff; overflow: hidden; }
#panel-cuerpo > #t-wa { flex: 1; display: flex; flex-direction: column;
                        min-height: 0; margin: 0; border-top: none; padding: .6rem; }
/* Dentro del panel la conversación manda: se come todo el alto disponible. */
#panel-cuerpo #wa-hilo { flex: 1; max-height: none; }
#panel-cuerpo #t-wa h3 { display: none; }   /* ya lo dice la barra */
.panel-barra button.activa { background: var(--rojo); color: #fff; }

/* El asunto manda en la tarjeta: es lo primero que se mira. */
#t-familia { font-weight: 700; font-size: .95rem; }
/* Un repaso no es una venta: la plaga ha vuelto y quien llama debe saberlo
   antes de descolgar. Lo mismo con seguridad. */
#t-familia.ojo { background: var(--rojo); color: #fff; }

#t-es { font-weight: 700; background: #e8eaf6; color: #333; }
#t-es.verde { background: #1b7f3b; color: #fff; }

#t-correo { margin-top: .8rem; border-top: 1px solid #e6e6e6; padding-top: .6rem; }
#t-correo h3 { margin: 0 0 .4rem; font-size: 1rem; }
#co-texto, #co-cc { width: 100%; padding: .5rem; border-radius: 8px;
                    border: 1px solid #ccc; font: inherit; box-sizing: border-box;
                    margin-bottom: .4rem; }

#tab-escribir input, #tab-escribir textarea {
  width: 100%; padding: .55rem; margin-bottom: .5rem; border: 1px solid #ccc;
  border-radius: 8px; font: inherit; box-sizing: border-box;
}

#es-desde { width: 100%; padding: .55rem; margin-bottom: .5rem; border: 1px solid #ccc;
            border-radius: 8px; font: inherit; box-sizing: border-box; background: #fff; }

/* Lo cerrado hoy: tachado y apagado, pero A LA VISTA. Que una tarea
   desaparezca sin rastro es lo que hace que se deje de confiar en la
   pantalla — sobre todo los primeros días. */
tr.cerrada td { text-decoration: line-through; opacity: .55; }
tr.cerrada td span.silencio { text-decoration: none; }

/* Un dato que falta se DICE. Callarlo deja a quien lee la tarjeta sin saber
   si es un fallo de la pantalla o si el aviso vino así. */
.sin-dato { color: #b45309; background: #fffbeb; border: 1px solid #fcd34d;
            border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: .92em; }

/* En móvil, la lista de chats deja de ser tabla y se apila en fichas: una por
   conversación, con sus botones DENTRO de la pantalla. Antes «✋ Lo cojo» y
   «abrir» caían fuera y había que deslizar la tabla de lado para pulsarlos —
   y es lo que más se usa desde el móvil. */
@media (max-width: 700px) {
  .tab table.apilable { display: block; overflow-x: visible; width: 100%; }
  .tab table.apilable thead, .tab table.apilable tr:first-child { display: none; }
  .tab table.apilable tr {
    display: block; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  .tab table.apilable td {
    display: flex; justify-content: space-between; gap: 12px;
    white-space: normal; border: 0; padding: 3px 0;
    /* Los valores vienen de fuera y pueden ser largos SIN espacios: una
       referencia de chat, un correo, un nombre pegado. `normal` no parte una
       cadena sin espacios, así que se salía de la ficha — y como la página
       tiene el deslizamiento lateral cortado, ese trozo quedaba RECORTADO y
       sin forma de llegar a él. Un dato que no se puede leer es peor que uno
       feo: aquí se parte por donde haga falta. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* En una caja flexible, un hijo no baja de su ancho mínimo de contenido
     salvo que se le diga. Sin esto, lo de arriba no llega a aplicarse. */
  .tab table.apilable td > * { min-width: 0; }
  /* El nombre de cada dato, delante y apagado, ya que no hay cabecera. */
  .tab table.apilable td[data-titulo]::before {
    content: attr(data-titulo); color: #6b7280; font-size: .85em;
    flex: 0 0 auto;
  }
  .tab table.apilable td.acciones {
    justify-content: flex-start; flex-wrap: wrap; margin-top: 6px;
  }
  .tab table.apilable td.acciones button { flex: 1 1 auto; padding: 10px 12px; }
  /* Lo mismo para los desplegables y los campos de las fichas: cómodos de
     tocar con el dedo, no botoncitos de ratón. */
  /* En el móvil, TODO lo que se toca con el dedo: botones, desplegables y
     campos, estén en una ficha o en el formulario de abajo. 44 px es el
     mínimo cómodo; los botones «mini» se quedaban en 36 y el de dar de alta
     en 28, que es de ratón, no de pulgar.

     Y 16 px de letra a propósito: por debajo de eso, el iPhone hace zoom
     solo al tocar un campo y te descoloca la pantalla. */
  .tab button, .tab select, .tab input {
    min-height: 44px; font-size: 16px;
  }
  .tab table.apilable td.acciones select,
  .tab table.apilable td input { flex: 1 1 auto; padding: 10px 12px; }
  .tab .form-linea { display: flex; flex-wrap: wrap; gap: 8px; }
  .tab .form-linea > * { flex: 1 1 140px; }
}

/* El turno, ancho cómodo en el PC y a lo que dé en el móvil. */
.e-turno { width: 120px; max-width: 100%; }