/*
 * La hoja del panel del cliente y de la administración.
 *
 * Vivía dentro de layouts/panel.blade.php, y las vistas iban llenas de
 * style="…"; por eso la política de seguridad tenía que admitir estilos en
 * línea. Desde 2.6 todo está aquí y `style-src` es solo 'self'. Una vista nueva
 * no lleva style="": se añade aquí una clase (hay una prueba que lo vigila).
 */
:root{
  --fondo:#f3f5f6; --tarjeta:#fff; --tinta:#15191d; --tinta2:#4b555e;
  --suave:#6b757e; --linea:rgba(21,25,29,.12); --acento:#b8560c;
  --acento-suave:rgba(184,86,12,.09); --ok:#1c7a53; --mal:#b3261e;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#0f1215; --tarjeta:#171b1f; --tinta:#e6eaec; --tinta2:#c0c7cc;
    --suave:#8d979f; --linea:rgba(230,234,236,.14); --acento:#ff9a45;
    --acento-suave:rgba(255,154,69,.12); --ok:#4fc79a; --mal:#f2836f;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* 1120 y no 940: con todas las pantallas del cliente la barra no cabía y «Salir» bajaba de línea (13/09). */
.contenedor{max-width:1120px;margin:0 auto;padding:0 20px 64px}
header.barra{border-bottom:1px solid var(--linea);margin-bottom:32px;background:var(--tarjeta)}
header.barra .contenedor{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.marca{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;text-decoration:none;color:var(--tinta)}
.marca span{color:var(--acento)}
nav{display:flex;gap:14px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav a{color:var(--tinta2);text-decoration:none;font-size:.9rem}
nav a:hover,nav a[aria-current]{color:var(--acento)}
h1{font-size:1.7rem;letter-spacing:-.025em;margin:0 0 6px;text-wrap:balance}
h2{font-size:1.1rem;letter-spacing:-.015em;margin:32px 0 12px}
.sub{color:var(--suave);margin:0 0 28px}
/* Sin esto los enlaces salen en el azul por defecto del navegador, que
   sobre el fondo oscuro parece un fallo de la pagina. */
.sub a{color:var(--acento)}
/* Y los de tablas y avisos: en morado o azul no se leían sobre el fondo oscuro (13/09). */
main a{color:var(--acento)}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:6px;padding:20px;margin-bottom:16px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden;margin-bottom:24px}
.cifra{background:var(--tarjeta);padding:16px 18px}
.cifra .k{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);margin-bottom:6px}
.cifra .v{display:block;font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
label{display:block;font-size:.85rem;color:var(--tinta2);margin-bottom:6px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--linea);border-radius:5px;
  background:var(--fondo);color:var(--tinta);font:inherit;font-size:.95rem}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}
button{background:var(--acento);color:#fff;border:0;border-radius:5px;padding:10px 18px;
  font:inherit;font-size:.93rem;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.discreto{background:transparent;color:var(--tinta2);border:1px solid var(--linea)}
.campo{margin-bottom:16px}
.error{color:var(--mal);font-size:.86rem;margin-top:6px}
.aviso{border-left:3px solid var(--mal);background:var(--tarjeta);padding:14px 16px;border-radius:0 5px 5px 0;margin-bottom:16px}
.aviso.bien{border-left-color:var(--ok)}
.etiqueta{display:inline-block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;padding:3px 8px;border-radius:3px;background:var(--acento-suave);color:var(--acento)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85em}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);font-size:.9rem}
th{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);font-weight:600}
td{font-variant-numeric:tabular-nums;color:var(--tinta2)}
tr:last-child td{border-bottom:0}
.centrado{max-width:400px;margin:80px auto}

/* Lo que antes iba en style="..." dentro de las vistas (2.6, paso 1).
 * Con !important porque un style en línea ganaba a las reglas de arriba,
 * y así la pantalla queda exactamente igual. */
.u-ai-baseline{align-items:baseline !important}
.u-ai-center{align-items:center !important}
.u-ai-end{align-items:end !important}
.u-ai-flex-end{align-items:flex-end !important}
.u-b-1-linea{border:1px solid var(--linea) !important}
.u-b-1-mal{border:1px solid var(--mal) !important}
.u-bb-1-linea{border-bottom:1px solid var(--linea) !important}
.u-bg-fff{background:#fff !important}
.u-bg-fondo{background:var(--fondo) !important}
.u-bg-linea{background:var(--linea) !important}
.u-bg-transparent{background:transparent !important}
.u-bl-3-acento{border-left:3px solid var(--acento) !important}
.u-blc-acento{border-left-color:var(--acento) !important}
.u-bt-1-linea{border-top:1px solid var(--linea) !important}
.u-c-acento{color:var(--acento) !important}
.u-c-c0392b{color:#c0392b !important}
.u-c-mal{color:var(--mal) !important}
.u-c-suave{color:var(--suave) !important}
.u-c-tinta{color:var(--tinta) !important}
.u-c-tinta2{color:var(--tinta2) !important}
.u-cols-auto170{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important}
.u-cur-pointer{cursor:pointer !important}
.u-d-block{display:block !important}
.u-d-flex{display:flex !important}
.u-d-grid{display:grid !important}
.u-d-inline{display:inline !important}
.u-flex-1{flex:1 !important}
.u-font-heredada{font:inherit !important}
.u-fs-075em{font-size:.75em !important}
.u-fs-075rem{font-size:.75rem !important}
.u-fs-078em{font-size:.78em !important}
.u-fs-078rem{font-size:.78rem !important}
.u-fs-085em{font-size:.85em !important}
.u-fs-085rem{font-size:.85rem !important}
.u-fs-086rem{font-size:.86rem !important}
.u-fs-088rem{font-size:.88rem !important}
.u-fs-08em{font-size:.8em !important}
.u-fs-08rem{font-size:.8rem !important}
.u-fs-09rem{font-size:.9rem !important}
.u-fs-1_05rem{font-size:1.05rem !important}
.u-fs-1_1rem{font-size:1.1rem !important}
.u-fs-1_3rem{font-size:1.3rem !important}
.u-fs-1_4rem{font-size:1.4rem !important}
.u-fs-1rem{font-size:1rem !important}
.u-fw-400{font-weight:400 !important}
.u-gap-0-14{gap:0 14px !important}
.u-gap-10{gap:10px !important}
.u-gap-12{gap:12px !important}
.u-gap-16{gap:16px !important}
.u-gap-8{gap:8px !important}
.u-h-10{height:10px !important}
.u-jc-space-between{justify-content:space-between !important}
.u-lh-2{line-height:2 !important}
.u-ls-005em{letter-spacing:.05em !important}
.u-ls-02em{letter-spacing:.2em !important}
.u-lst-none{list-style:none !important}
.u-m-0{margin:0 !important}
.u-m-0-0-10{margin:0 0 10px !important}
.u-m-0-0-12{margin:0 0 12px !important}
.u-m-0-0-6{margin:0 0 6px !important}
.u-m-0-6-6-0{margin:0 6px 6px 0 !important}
.u-m-10-0-0{margin:10px 0 0 !important}
.u-m-14-0-8{margin:14px 0 8px !important}
.u-m-16-0-12{margin:16px 0 12px !important}
.u-m-1rem-0{margin:1rem 0 !important}
.u-m-22-0-6{margin:22px 0 6px !important}
.u-m-6-0-0{margin:6px 0 0 !important}
.u-m-8-0-0{margin:8px 0 0 !important}
.u-maxh-260{max-height:260px !important}
.u-maxw-200{max-width:200px !important}
.u-maxw-220{max-width:220px !important}
.u-maxw-340{max-width:340px !important}
.u-maxw-520{max-width:520px !important}
.u-maxw-560{max-width:560px !important}
.u-mb-10{margin-bottom:10px !important}
.u-mb-12{margin-bottom:12px !important}
.u-mb-14{margin-bottom:14px !important}
.u-mb-16{margin-bottom:16px !important}
.u-mb-1rem{margin-bottom:1rem !important}
.u-mb-5{margin-bottom:5px !important}
.u-mb-6{margin-bottom:6px !important}
.u-mb-8{margin-bottom:8px !important}
.u-minw-240{min-width:240px !important}
.u-mr-6{margin-right:6px !important}
.u-mt-0{margin-top:0 !important}
.u-mt-10{margin-top:10px !important}
.u-mt-12{margin-top:12px !important}
.u-mt-14{margin-top:14px !important}
.u-mt-16{margin-top:16px !important}
.u-mt-18{margin-top:18px !important}
.u-mt-6{margin-top:6px !important}
.u-mt-8{margin-top:8px !important}
.u-ov-hidden{overflow:hidden !important}
.u-ovx-auto{overflow-x:auto !important}
.u-p-0{padding:0 !important}
.u-p-10{padding:10px !important}
.u-p-12-0{padding:12px 0 !important}
.u-p-8{padding:8px !important}
.u-pl-0{padding-left:0 !important}
.u-pl-20{padding-left:20px !important}
.u-pt-12{padding-top:12px !important}
.u-pt-14{padding-top:14px !important}
.u-r-4{border-radius:4px !important}
.u-r-6{border-radius:6px !important}
.u-r-8{border-radius:8px !important}
.u-resize-vertical{resize:vertical !important}
.u-ta-center{text-align:center !important}
.u-ta-right{text-align:right !important}
.u-tdec-none{text-decoration:none !important}
.u-w-100pc{width:100% !important}
.u-w-auto{width:auto !important}
.u-wb-break-all{word-break:break-all !important}
.u-wrap-wrap{flex-wrap:wrap !important}
.u-ws-nowrap{white-space:nowrap !important}
.u-ws-pre-wrap{white-space:pre-wrap !important}
.u-bl-3-c0392b{border-left:3px solid #c0392b !important}
.u-bg-acento{background:var(--acento) !important}
.u-c-fff{color:#fff !important}
.u-ol-2-acento{outline:2px solid var(--acento) !important}
.u-op-05{opacity:.5 !important}

/* Las barras de «Cómo va el mes»: su ancho sale de los datos, así que van en SVG. */
.barra-relleno{fill:var(--acento)}
.barra-relleno.alto{fill:#c0392b}

/* Las bandejas de Inicio (2.6, paso 3): una fila por conversación, toda ella enlace. */
.bandeja-fila{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:12px 16px;
  border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.bandeja-fila:hover{background:var(--acento-suave)}
.bandeja-cuando{margin-left:auto;font-size:.8rem;color:var(--suave)}
.bandeja-vacia{margin:0;padding:14px 16px;color:var(--suave)}
.bandeja-mas{display:block;padding:12px 16px;font-size:.9rem}

/*
 * El móvil (2.6, paso 2). Medido en 360 px antes de tocar nada: el menú partido
 * en muchas líneas se comía un tercio de la pantalla y la lista de
 * conversaciones había que moverla de lado. Quien coge una conversación
 * escalada no está en una mesa.
 */
@media (max-width:700px){
  .contenedor{padding:0 14px 48px}
  header.barra{margin-bottom:18px}
  header.barra .contenedor{gap:6px;padding-top:10px;padding-bottom:0}
  /* Una fila que se desliza; panel.js centra la pantalla en la que se está. */
  header.barra nav{flex-wrap:nowrap;overflow-x:auto;margin-left:0;width:100%;gap:18px;padding-bottom:10px;white-space:nowrap;scrollbar-width:none}
  header.barra nav::-webkit-scrollbar{display:none}
  h1{font-size:1.4rem}
  .sub{margin-bottom:18px}
  .tarjeta{padding:14px}
  /* «espera_confirmacion» no cabía en su cifra y se cortaba. */
  .cifra .v{overflow-wrap:anywhere}
  /* Por debajo de 16 px el iPhone amplía la página al tocar un campo, y no vuelve. */
  input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{font-size:16px}
  /* Dedos, no ratón: y si no caben en una línea, bajan a la siguiente. */
  button{min-height:44px}
  main form{flex-wrap:wrap}
  /* Una tarjeta por fila en vez de una tabla que hay que mover de lado. */
  .tabla-apilada thead{display:none}
  .tabla-apilada tr{display:block;padding:10px 14px;border-bottom:1px solid var(--linea)}
  .tabla-apilada tr:last-child{border-bottom:0}
  .tabla-apilada td{display:block;padding:2px 0;border:0;text-align:left !important}
  .tabla-apilada td[data-titulo]::before{content:attr(data-titulo) " · ";color:var(--suave);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
}