/* ==========================================================================
   Archivo de Líneas — librería CSS global
   Sistema visual extraído del mockup de Claude Design.
   Un único fichero, sin dependencias. v1.0.0
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Superficies */
  --fondo:         #f4f2ee;
  --superficie:    #faf9f6;
  --superficie-2:  #fbfaf8;
  --superficie-3:  #f0eee8;
  /* Ancho de la columna de conversaciones. Lo usan la columna y el bloque de
     pestañas de la barra superior: si cambia, cambian los dos a la vez. */
  --col-chats:     300px;
  --oscuro:        #1b2430;

  /* Marca */
  --verde:         #0f8a7d;
  --verde-suave:   #e4f1ee;
  --azul:          #3b5f8a;

  /* Estado destructivo / borrado */
  --naranja:       #c2622d;
  --naranja-osc:   #a1481f;
  --naranja-suave: #fdf4ee;

  /* Bordes */
  --borde:         #e4e1da;
  --borde-2:       #e0ddd4;
  --borde-3:       #d8d4cb;
  --borde-4:       #c7c2b6;

  /* Texto */
  --texto:         #1b2430;
  --texto-2:       #6b7280;
  --texto-3:       #9ca3af;
  --texto-inv:     #f4f2ee;

  /* Tipografía */
  --f-titulo: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-texto:  'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Geometría */
  --r-sm: 7px;
  --r:    8px;
  --r-md: 9px;
  --r-lg: 14px;

  --sombra-sm: 0 1px 2px rgba(27,36,48,.05);
  --sombra:    0 4px 14px rgba(27,36,48,.07);
  --sombra-lg: 0 20px 50px rgba(0,0,0,.28);

  --cabecera-h: 62px;
}

/* --- 2. Reinicio -------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }

/* El atributo `hidden` del navegador funciona con una regla [hidden]{display:none}
   de la hoja del propio navegador, y CUALQUIER regla de autor con `display` la
   anula — incluida la de arriba. Sin esto, un <img hidden> se pintaba igual y
   salía el icono de imagen rota con el src vacío. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--borde-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* --- 3. Tipografía ------------------------------------------------------ */
h1, h2, h3, h4, .titulo { font-family: var(--f-titulo); font-weight: 600; color: var(--texto); }
h1 { font-size: 20px;   letter-spacing: .2px; }
h2 { font-size: 16.5px; }
h3 { font-size: 15.5px; }
h4 { font-size: 13px; }

.txt-sec   { color: var(--texto-2); }
.txt-ter   { color: var(--texto-3); }
.txt-sm    { font-size: 13px; }
.txt-xs    { font-size: 12px; }
.txt-fuerte{ font-weight: 600; }
.mono      { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* --- 4. Marca ----------------------------------------------------------- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca__icono {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--verde), var(--azul));
  display: flex; align-items: center; justify-content: center; flex: none;
}
.marca__icono::after {
  content: ''; width: 12px; height: 12px; border-radius: 3px;
  background: var(--texto-inv); opacity: .9;
}
.marca__texto { font-family: var(--f-titulo); font-weight: 600; font-size: 16.5px; }
.marca__version {
  font-size: 10.5px; font-weight: 500; opacity: .55;
  align-self: flex-end; margin-left: -4px; padding-bottom: 3px;
  letter-spacing: .2px; white-space: nowrap;
}

/* --- 5. Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--r); border: 1px solid transparent;
  background: var(--oscuro); color: var(--texto-inv);
  font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: opacity .15s, background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { opacity: .88; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--bloque { width: 100%; padding: 11px; }

.btn--claro   { background: var(--superficie); color: var(--texto); border-color: var(--borde-2); }
.btn--claro:hover:not(:disabled) { background: var(--superficie-3); opacity: 1; }
.btn--verde   { background: var(--verde); }
/* Verde muy pálido: acción positiva pero que no compite con la principal. */
.btn--suave   { background: var(--verde-suave); color: #0b6c61; border-color: #c9e3de; }
.btn--suave:hover:not(:disabled) { background: #d7ebe6; opacity: 1; }
.btn--peligro { background: var(--naranja-osc); }
.btn--fantasma{ background: transparent; color: var(--texto-2); border-color: var(--borde-2); }
.btn--sm      { padding: 7px 12px; font-size: 12.5px; }

.btn-icono {
  width: 34px; height: 34px; border-radius: var(--r); flex: none;
  border: 1px solid rgba(244,242,238,.18); background: rgba(244,242,238,.08);
  color: var(--texto-inv); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.btn-icono:hover { background: rgba(244,242,238,.16); }

/* --- 6. Formularios ----------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__etiqueta { font-size: 12px; font-weight: 600; color: var(--texto); }
.campo__ayuda    { font-size: 11.5px; color: var(--texto-3); line-height: 1.45; }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  background: #fff; color: var(--texto);
  border: 1px solid var(--borde-2); border-radius: var(--r);
  font-size: 13.5px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--texto-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(15,138,125,.12);
}
.input:disabled { background: var(--superficie-3); color: var(--texto-3); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista {
  width: 38px; height: 22px; border-radius: 11px; background: var(--borde-3);
  position: relative; transition: background .18s; flex: none;
}
.interruptor__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .18s; box-shadow: var(--sombra-sm);
}
.interruptor input:checked + .interruptor__pista { background: var(--verde); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(16px); }

/* --- 7. Tarjetas y paneles --------------------------------------------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: 18px;
}
.panel { display: flex; flex-direction: column; gap: 10px; }
.panel__titulo {
  font-family: var(--f-titulo); font-weight: 600; font-size: 13px;
  color: var(--texto); letter-spacing: .1px;
}

.separador { height: 1px; background: var(--borde); border: 0; }

/* Barra de progreso del volcado de histórico. */
.progreso {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--borde-2);
}
.progreso__barra {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--verde), var(--azul));
  transition: width .6s ease;
  min-width: 6px;
}

/* --- 8. Distintivos ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.chip--verde   { background: var(--verde-suave); color: #0b6c61; }
.chip--naranja { background: var(--naranja-suave); color: var(--naranja-osc); }
.chip--neutro  { background: var(--superficie-3); color: var(--texto-2); }
.chip__punto   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.punto-estado { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* --- 9. Avatares -------------------------------------------------------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .3px;
  font-family: var(--f-titulo); text-transform: uppercase;
}
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--c1 { background: #0f8a7d; } .avatar--c2 { background: #3b5f8a; }
.avatar--c3 { background: #8a5a3b; } .avatar--c4 { background: #6a4c93; }
.avatar--c5 { background: #b6432c; } .avatar--c6 { background: #3c7a4e; }

/* --- 10. Cabecera ------------------------------------------------------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 28px; height: var(--cabecera-h);
  background: var(--oscuro); color: var(--texto-inv);
}
.cabecera .marca__texto { font-size: 16px; }
.cabecera__dcha { display: flex; align-items: center; gap: 10px; }

.selector-linea {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: var(--r);
  background: rgba(244,242,238,.08); border: 1px solid rgba(244,242,238,.18);
  color: var(--texto-inv); font-size: 13.5px; cursor: pointer;
}
.selector-linea:hover { background: rgba(244,242,238,.14); }

/* --- 11. Pestañas ACTUAL / HISTÓRICO ------------------------------------ */
/* Barra de control: pestañas y filtros en la MISMA línea, bajo la cabecera.
   Las dos son `flex: none` dentro de un cuerpo en columna, así que quedan
   fijas sin recurrir a position:fixed ni a compensar alturas a mano. */
.barra-control {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px; background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
}

/* Pestañas + «marcar todo leído».

   El bloque termina exactamente donde acaba la columna de conversaciones, para
   que el corte vertical de la pantalla sea uno solo. Por eso se resta el
   padding izquierdo de la barra: asi el borde derecho de los dos coincide. */
.grupo-vistas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex: none;
  width: calc(var(--col-chats) - 28px);
}
.grupo-vistas__accion { display: flex; flex: none; }
.btn-visto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--borde-2); border-radius: 9px;
  background: var(--superficie); color: var(--texto-2);
  cursor: pointer; transition: background .12s, color .12s;
}
.btn-visto:hover:not(:disabled) { background: var(--verde-suave); color: #0b6c61; }
.btn-visto:disabled { opacity: .38; cursor: default; }

.filtros { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; }
.filtros__busca { flex: 1; min-width: 140px; padding: 7px 11px; font-size: 12.5px; }
.filtros__fecha { width: auto; padding: 6px 9px; font-size: 12.5px; }
.pestanas {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--superficie-3); border-radius: 10px;
}
.pestana {
  padding: 8px 18px; border-radius: var(--r); border: none; background: transparent;
  font-family: var(--f-titulo); font-weight: 600; font-size: 12px;
  letter-spacing: .8px; color: var(--texto-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { background: var(--oscuro); color: var(--texto-inv); }



/* --- 12. Distribución del archivo --------------------------------------- */

/* La pantalla del archivo no se desplaza: sólo lo hacen la lista de chats y
   la conversación. Con el cuerpo en columna a 100vh, la cabecera y la barra
   de control quedan fijas por construcción. */
.pantalla-archivo {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
}
.pantalla-archivo > .cabecera,
.pantalla-archivo > .barra-control,
.pantalla-archivo > div:has(> .aviso) { flex: none; }
.pantalla-archivo > .archivo { flex: 1; min-height: 0; height: auto; }

.archivo { display: flex; height: calc(100vh - var(--cabecera-h) - 62px); }
.archivo__lista {
  width: var(--col-chats); flex: none; overflow-y: auto;
  background: var(--superficie); border-right: 1px solid var(--borde);
}
.archivo__conv { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Lista de chats */
.chat-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 16px; border: none; border-bottom: 1px solid var(--borde);
  background: transparent; text-align: left; cursor: pointer;
  transition: background .12s;
}
.chat-item:hover { background: var(--superficie-3); }
/* El chat abierto. Antes era un fondo verde palido y nada mas: en una lista
   larga no se localizaba de un vistazo. La barra lateral es lo que de verdad
   lo ancla, porque se ve por el rabillo del ojo al recorrer la columna. */
.chat-item[aria-current="true"] {
  background: var(--verde-suave);
  box-shadow: inset 3px 0 0 var(--verde);
}
.chat-item[aria-current="true"] .chat-item__nombre { color: #0b6c61; }
.chat-item[aria-current="true"]:hover { background: #d7ebe6; }
.chat-item__cuerpo { flex: 1; min-width: 0; }
/* Nombre y vista previa, cada uno en su línea. Son <span>: sin esto, en los
   grupos (que no tienen línea de teléfono en medio) la vista previa se pegaba
   al nombre en el mismo renglón. */
.chat-item__nombre, .chat-item__previa { display: block; }
.chat-item, .chat-item:hover { text-decoration: none; }
.chat-item__nombre {
  font-weight: 600; font-size: 13.5px; color: var(--texto); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item__previa {
  font-size: 12.5px; color: var(--texto-2); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El número real, debajo del nombre: presente pero que no compita. */
.chat-item__tel {
  display: block; font-size: 11px; color: var(--texto-3); line-height: 1.3;
  letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.chat-item__hora { font-size: 11.5px; color: var(--texto-3); }
.chat-item__contador {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  background: var(--verde); color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* Cabecera de la conversación */
.conv__cabecera {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 28px; border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.conv__nombre { font-weight: 600; font-size: 14.5px; }
.conv__exportar { margin-left: auto; flex: none; white-space: nowrap; }
.conv__sub    { font-size: 12.5px; color: var(--texto-3); }

/* --- 13. Mensajes ------------------------------------------------------- */
.conv__cuerpo {
  flex: 1; overflow-y: auto; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 14px;
}

.msg { max-width: min(560px, 68%); align-self: flex-start; }
.msg--mio { align-self: flex-end; }

.msg__burbuja {
  background: #fff; border-radius: var(--r-lg);
  padding: 12px 16px 8px; box-shadow: var(--sombra-sm);
  font-size: 13.5px; line-height: 1.55; word-wrap: break-word;
}
.msg--mio .msg__burbuja { background: var(--verde-suave); }

.msg__hora { display: block; margin-top: 4px; font-size: 11px; color: var(--texto-3); text-align: right; }
.msg__autor { font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }

/* Mensaje borrado en WhatsApp: se conserva, se señala */
.msg--borrado .msg__burbuja {
  border-left: 3px solid var(--naranja);
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
/* Reacciones: bajo la burbuja, del lado del mensaje. Las retiradas solo se
   ven en HISTÓRICO, tachadas. */
.msg__reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 8px 2px; position: relative; }
.msg--mio .msg__reacciones { justify-content: flex-end; }
.reaccion {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 14px; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: var(--sombra-sm); cursor: default;
}
.reaccion__n { font-size: 11px; color: var(--texto-2); }
.reaccion--retirada { opacity: .5; text-decoration: line-through; }

.msg__nota-borrado {
  margin-top: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--naranja-osc); text-align: right;
}

/* Mensaje temporal ya caducado en WhatsApp */
.msg--caducado .msg__burbuja {
  border-left: 3px solid var(--borde-4);
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
  background: var(--superficie-3);
}
.msg__nota-caducado {
  margin-top: 5px; font-size: 11.5px; color: var(--texto-2); text-align: right;
}
.msg__nota-editado { font-size: 11px; color: var(--texto-3); font-style: italic; }

/* Adjuntos dentro de la burbuja. */
.msg__imagen { display: block; margin: 2px 0 6px; border-radius: 10px; overflow: hidden; }
.msg__imagen img {
  width: 100%; height: auto; max-height: 340px; object-fit: cover;
  background: var(--superficie-3); display: block;
}
.msg__audio { width: 100%; min-width: 240px; margin: 4px 0 6px; height: 38px; }
.msg__video { width: 100%; max-height: 340px; border-radius: 10px; margin: 2px 0 6px; }

.msg__fichero {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin: 2px 0 6px;
  border: 1px solid var(--borde-2); border-radius: var(--r);
  background: var(--superficie); color: var(--texto);
  font-size: 12.5px; text-decoration: none;
}
.msg__fichero:hover { background: var(--superficie-3); text-decoration: none; }
.msg__fichero-icono {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--verde-suave); color: #0b6c61;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.msg__adjunto-ausente {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px dashed var(--borde-3);
  border-radius: var(--r); background: var(--superficie-3);
  font-size: 12.5px; color: var(--texto-2); text-align: left;
  margin: 2px 0 6px;
}
/* El hueco es pulsable: baja ESE adjunto sin abrir la descarga masiva. */
.msg__adjunto-ausente--pedible { cursor: pointer; transition: border-color .15s, background .15s; }
.msg__adjunto-ausente--pedible:hover:not(:disabled) {
  border-color: var(--verde); background: var(--verde-suave); color: #0b6c61;
}
.msg__adjunto-ausente--pedible:disabled { cursor: progress; opacity: .8; }
.msg__pedir-icono {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--borde-2); color: var(--texto-2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.msg__adjunto-ausente--pedible:hover .msg__pedir-icono { background: #c9e3de; color: #0b6c61; }

/* Dónde te quedaste la última vez. Marca LOCAL del portal: no tiene nada que
   ver con los acuses de WhatsApp. */
.separador-nuevos {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0; color: var(--verde);
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
.separador-nuevos::before, .separador-nuevos::after {
  content: ''; flex: 1; height: 1px; background: var(--verde); opacity: .45;
}

.separador-fecha {
  align-self: center; padding: 4px 14px; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-2);
  font-size: 11.5px; font-weight: 600;
}

/* Aviso permanente de solo lectura */
.aviso-solo-lectura {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; background: var(--naranja-suave);
  border-top: 1px solid var(--borde-2);
  font-size: 12.5px; color: var(--naranja-osc);
}

.vacio {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--texto-3); font-size: 14px;
}

/* --- 14. Panel lateral de Opciones -------------------------------------- */
.velo {
  position: fixed; inset: 0; background: rgba(27,36,48,.45);
  z-index: 40; display: flex; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.velo.abierto { opacity: 1; visibility: visible; }

/* Un tercio de la pantalla, con suelo para que no se estruje en portátiles
   y techo para que no se vuelva absurdo en monitores anchos. */
.cajon {
  width: 33%; min-width: 400px; max-width: 620px;
  height: 100%;
  background: var(--superficie); box-shadow: -8px 0 30px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,.29,1);
}
.velo.abierto .cajon { transform: translateX(0); }

@media (max-width: 720px) {
  .cajon { width: 100%; min-width: 0; max-width: none; }
}

/* Sin JavaScript el panel se sirve como página completa: el velo no aplica. */
.velo--estatico {
  position: static; background: none; display: block; opacity: 1; visibility: visible;
}
.velo--estatico .cajon {
  width: 100%; min-width: 0; max-width: 760px; height: auto;
  margin: 0 auto; transform: none; box-shadow: none;
}

/* Al abrir el panel se bloquea el desplazamiento del fondo. */
body.con-cajon { overflow: hidden; }
.cajon__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; background: var(--oscuro); color: var(--texto-inv); flex: none;
}
.cajon__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 15.5px; }
.cajon__cerrar {
  width: 28px; height: 28px; border-radius: var(--r-sm); border: none;
  background: rgba(255,255,255,.14); color: var(--texto-inv);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cajon__cuerpo {
  padding: 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 26px;
}

.fila-linea {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--borde-2); border-radius: var(--r);
  background: #fff; text-align: left; cursor: pointer; font-size: 13.5px;
}
.fila-linea:hover { border-color: var(--borde-4); }
.fila-anadir {
  padding: 12px; border: 1px dashed var(--borde-3); border-radius: var(--r);
  background: transparent; color: var(--texto-2);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; width: 100%;
}
.fila-anadir:hover { border-color: var(--verde); color: var(--verde); }
.fila-anadir:disabled { opacity: .45; cursor: not-allowed; }

/* El recuadro ES el control: al pulsarlo abre el selector de ficheros, y
   también acepta arrastrar y soltar. No hay botón "Seleccionar archivo". */
.zona-soltar {
  display: block; padding: 26px 18px;
  border: 1px dashed var(--borde-3); border-radius: var(--r);
  text-align: center; font-size: 12.5px; color: var(--texto-2);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.zona-soltar:hover, .zona-soltar.activa {
  border-color: var(--verde); background: var(--verde-suave); color: #0b6c61;
}
.zona-soltar.con-fichero {
  border-style: solid; border-color: var(--verde);
  background: var(--verde-suave); color: #0b6c61; font-weight: 600;
}

/* Campo accesible pero invisible: el teclado y los lectores de pantalla lo
   alcanzan; el ratón usa el recuadro. */
.campo-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
}
.campo-oculto:focus-visible + .zona-soltar { outline: 2px solid var(--verde); outline-offset: 2px; }

.fila-info {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--borde-2); border-radius: var(--r);
  background: #fff;
}

/* Zona de peligro: vaciar archivo */
.zona-peligro {
  border: 1px solid var(--naranja); border-radius: var(--r);
  background: var(--naranja-suave); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.zona-peligro__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 13px; color: var(--naranja-osc); }
.zona-peligro__texto  { font-size: 12px; color: var(--naranja-osc); line-height: 1.5; }

/* --- 14.b Visor de imágenes --------------------------------------------- */
.visor {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(12,17,23,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.visor__marco {
  max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.visor__marco img {
  max-width: 100%; max-height: calc(100vh - 140px);
  width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  object-fit: contain;
}
.visor__pie {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  color: rgba(244,242,238,.85); font-size: 12.5px;
}
.visor__cerrar {
  position: absolute; top: 16px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(244,242,238,.14); color: var(--texto-inv);
  font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.visor__cerrar:hover { background: rgba(244,242,238,.26); }

.msg__imagen { cursor: zoom-in; }

/* --- 15. Modal ---------------------------------------------------------- */
.modal-velo {
  position: fixed; inset: 0; background: rgba(27,36,48,.55);
  z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-velo[hidden] { display: none !important; }
.modal {
  width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--superficie); border-radius: var(--r-lg);
  padding: 30px 32px; box-shadow: var(--sombra-lg);
}
.modal__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.modal__texto  { font-size: 13px; color: var(--texto-2); line-height: 1.55; margin-bottom: 20px; }
.modal__acciones { display: flex; gap: 12px; margin-top: 22px; }
.modal__acciones .btn { flex: 1; }

.qr-marco {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: #fff; border-radius: var(--r);
  border: 1px solid var(--borde-2); margin: 0 auto 14px; width: fit-content;
  min-width: 232px; min-height: 232px;
}
.qr-marco img, .qr-marco svg { width: 220px; height: 220px; }

.pasos { margin: 16px 0 0; padding-left: 0; list-style: none; counter-reset: p; }
.pasos li {
  counter-increment: p; font-size: 13px; color: var(--texto-2);
  padding: 3px 0 3px 22px; position: relative; line-height: 1.5;
}
.pasos li::before {
  content: counter(p) "."; position: absolute; left: 0;
  font-weight: 600; color: var(--texto);
}

/* --- 16. Acceso --------------------------------------------------------- */
.acceso {
  min-height: 100vh; background: var(--oscuro);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.acceso__caja {
  width: 380px; max-width: 90vw; background: var(--superficie);
  border-radius: var(--r-lg); padding: 34px 32px;
  box-shadow: var(--sombra-lg);
}
.acceso__marca { margin-bottom: 26px; }
.acceso__texto { font-size: 13px; color: var(--texto-2); margin-bottom: 20px; }
.acceso__campos { display: flex; flex-direction: column; gap: 12px; }
.acceso__pie {
  text-align: center; font-size: 12px; color: var(--texto-3);
  margin-top: 12px; cursor: pointer;
}

/* --- 17. Avisos --------------------------------------------------------- */
/* Bloque, NO flex: un contenedor flex convierte cada nodo de texto suelto en un
   elemento flexible independiente, y un <strong> en mitad de una frase parte el
   párrafo en columnas. Ocurrió en la pantalla de bienvenida. */
.aviso {
  display: block;
  padding: 12px 14px; border-radius: var(--r);
  font-size: 13px; line-height: 1.5; border: 1px solid;
}
.aviso > * + * { margin-top: 6px; }
.aviso--error   { background: var(--naranja-suave); border-color: var(--naranja); color: var(--naranja-osc); }
.aviso--ok      { background: var(--verde-suave);   border-color: var(--verde);   color: #0b6c61; }
.aviso--neutro  { background: var(--superficie-3);  border-color: var(--borde-2); color: var(--texto-2); }

/* --- 18. Utilidades ----------------------------------------------------- */
.fila     { display: flex; align-items: center; gap: 10px; }
.fila--sep{ justify-content: space-between; }
.col      { display: flex; flex-direction: column; gap: 10px; }
.crece    { flex: 1; min-width: 0; }
.oculto   { display: none !important; }
.truncar  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.centrado { text-align: center; }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 19. Adaptativo ----------------------------------------------------- */
/* Piezas que solo existen en móvil: en escritorio no se ven. */
.conv__volver, .conv__filtros-movil { display: none; }

/* --- Móvil: una pantalla cada vez, como WhatsApp ------------------------
   Lista O conversación, nunca las dos. Sin chat elegido (el cuerpo no lleva
   .con-chat) se ve la lista a pantalla completa; con chat elegido, la
   conversación a pantalla completa con flecha para volver.
   Antes, por debajo de este ancho, la lista se apilaba encima de la
   conversación limitada al 40 % de la altura y no cabía nada.
   Es el mismo HTML que en escritorio: por encima de 860 px no cambia nada. */
@media (max-width: 860px) {
  .pantalla-archivo { height: 100vh; height: 100dvh; }
  .cabecera, .barra-pestanas, .barra-filtros { padding-left: 16px; padding-right: 16px; }
  .cabecera { gap: 10px; }
  .cabecera .marca { min-width: 0; }
  /* Solo el icono del portal: así el selector de línea cabe en un renglón. */
  .cabecera .marca__version, .cabecera .marca__texto { display: none; }
  .cabecera .selector-linea { white-space: nowrap; min-width: 0; }
  .cabecera__dcha { min-width: 0; }

  /* Pestañas a todo el ancho; los filtros pasan al interior de la conversación. */
  .barra-control { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .barra-control > .filtros, .barra-control > .crece { display: none; }
  .grupo-vistas { width: auto; flex: 1; }
  .pestanas { flex: 1; }
  .pestana { flex: 1; padding: 11px 8px; }
  .btn-visto { width: 44px; height: 44px; }

  /* Pantalla LISTA */
  .archivo__lista { width: 100%; border-right: none; }
  .pantalla-archivo:not(.con-chat) .archivo__conv { display: none; }
  .chat-item { padding: 12px 16px; }
  .chat-item .avatar { width: 46px; height: 46px; font-size: 15px; }
  .chat-item__nombre { font-size: 15px; }
  .chat-item__previa { font-size: 13.5px; }
  .chat-item__hora { font-size: 12px; }

  /* Pantalla CONVERSACIÓN */
  .con-chat > .cabecera,
  .con-chat > .barra-control,
  .con-chat .archivo__lista { display: none; }
  .conv__cabecera { position: relative; gap: 6px; padding: 8px 10px 8px 4px; }
  .conv__volver {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: var(--r); color: var(--texto);
  }
  .conv__volver:hover { background: var(--superficie-3); }
  .conv__texto-boton { display: none; }
  .conv__info, .conv__exportar { width: 42px; height: 42px; padding: 0; justify-content: center; margin-left: 0; }
  .conv__filtros-movil { display: block; flex: none; }
  .conv__filtros-movil > summary {
    list-style: none; width: 42px; height: 42px; padding: 0; justify-content: center; cursor: pointer;
  }
  .conv__filtros-movil > summary::-webkit-details-marker { display: none; }
  .conv__filtros-movil[open] > summary { background: var(--verde-suave); color: #0b6c61; }
  .conv__filtros-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    padding: 12px; background: var(--superficie-2);
    border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
  }
  /* Rejilla: buscador arriba, las dos fechas debajo, botón a todo el ancho. */
  .filtros--movil {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px 8px; align-items: center; min-width: 0;
  }
  .filtros--movil .filtros__busca { grid-column: 1 / -1; }
  .filtros--movil .filtros__fecha { width: 100%; min-width: 0; }
  .filtros--movil button[type=submit] { grid-column: 1 / -1; min-height: 44px; }
  .filtros--movil .chip { grid-column: 1 / -1; justify-self: start; }
  /* 16 px: por debajo, Safari amplía la página al tocar el campo. */
  .filtros--movil .filtros__busca { font-size: 16px; padding: 10px 12px; }
  .filtros--movil .filtros__fecha { font-size: 16px; padding: 9px 10px; }
  /* En pantallas táctiles el «hover» se queda pegado tras tocar. */
  @media (hover: none) { .chat-item:hover { background: transparent; } }
  .conv__cuerpo { padding: 16px 12px; }
  .msg { max-width: 88%; }
  .aviso-solo-lectura { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
}

@media print {
  .cabecera, .barra-pestanas, .barra-filtros, .archivo__lista,
  .aviso-solo-lectura, .btn, .btn-icono { display: none !important; }
  body { background: #fff; }
  .msg__burbuja { box-shadow: none; border: 1px solid var(--borde-2); }
}

/* --- Hueco de un mensaje que no se pudo descifrar -------------------------- */
.msg--cifrado .msg__burbuja { background: #fdf6ec; border: 1px dashed #e0c9a6; }
.msg__cifrado        { color: var(--texto-2); font-style: italic; font-size: 13px; }
.msg__cifrado-icono  { font-style: normal; margin-right: 4px; }

/* --- Radiografia del chat -------------------------------------------------- */
.modal--ancho   { max-width: 520px; width: 100%; }
.rx             { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 2px; }
.rx__titulo     { font-weight: 600; font-size: 12.5px; margin: 16px 0 8px; }
.rx__meses      { display: flex; flex-direction: column; gap: 4px; }
.rx__mes        { display: flex; align-items: center; gap: 9px; }
.rx__mes-etq    { font-size: 11.5px; color: var(--texto-2); width: 54px; flex: none;
                  font-variant-numeric: tabular-nums; }
.rx__mes-barra  { flex: 1; height: 9px; background: var(--superficie-3);
                  border-radius: 5px; overflow: hidden; }
.rx__mes-relleno{ display: block; height: 100%; background: var(--verde); border-radius: 5px; }
.rx__mes-n      { font-size: 11.5px; width: 46px; text-align: right; flex: none;
                  font-variant-numeric: tabular-nums; color: var(--texto-2); }
.conv__info     { flex: none; }
.rx__cabecera   { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rx__cabecera .modal__titulo { flex: 1; }

/* Globo de contenido borrado nuevo, en la lista del HISTÓRICO.
   Amarillo pastel: avisa sin competir con el globo verde de mensajes nuevos. */
.chat-item__contador--borrado {
  background: #f6e6a8;
  color: #6b5310;
  border: 1px solid #e6d18f;
}

/* --- Foto de perfil de la conversación ------------------------------------ */
.avatar--pulsable { border: none; cursor: pointer; font: inherit; }
.avatar--pulsable:hover { filter: brightness(1.12); }
.foto-marco {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; background: var(--superficie-3);
  border-radius: var(--r); overflow: hidden; margin-top: 4px;
}
.foto-marco img { display: block; width: 100%; height: auto; }
.foto-aviso { font-size: 13px; color: var(--texto-2); text-align: center; padding: 20px; margin: 0; }

/* --- Cadena de pasos de la vinculación ------------------------------------ */
.pipa        { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.pipa__paso  { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
               color: var(--texto-3); }
.pipa__paso--hecho    { color: var(--texto); }
.pipa__paso--curso    { color: var(--texto); font-weight: 600; }
.pipa__marca { width: 17px; height: 17px; flex: none; border-radius: 50%;
               display: inline-flex; align-items: center; justify-content: center;
               background: var(--superficie-3); color: var(--texto-3); font-size: 11px; }
.pipa__paso--hecho .pipa__marca { background: var(--verde); color: #fff; }
.pipa__paso--curso .pipa__marca { background: var(--verde-suave); color: #0b6c61; }
.pipa__paso--fallo             { color: var(--naranja-osc); }
.pipa__paso--fallo .pipa__marca{ background: var(--naranja-osc); color: #fff; }
.pipa__reloj { font-size: 11.5px; color: var(--texto-3); margin-top: 2px;
               font-variant-numeric: tabular-nums; }