/* ══════════════════════════════════════════════════════════════════
   Grupo La Habana · la app (iPhone + Android)
   La marca del grupo: negro profundo, el oro del logotipo y titulares
   en serifa. Superficies con filo dorado muy fino, nada de blancos.
   El sistema de cada móvil se respeta en la barra de pestañas y en la
   tipografía de texto; la marca, igual en los dos.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --negro:#0A0907; --sup:#15120D; --sup-2:#1C1812; --sup-3:#241F17;
  --filo:rgba(214,179,90,.16); --filo-2:rgba(214,179,90,.32);
  --oro:#D6B35A; --oro-2:#F0D48A; --oro-3:#A8822F;
  --txt:#F5EFE3; --txt-2:#B6AB96; --txt-3:#7F7564;
  --verde:#4FD497; --ambar:#E9B04A; --rojo:#F07168;
  --serif:'Cormorant Garamond', Georgia, serif;
  --lounge:#E3B96B; --hemingway:#CFAE78; --redlion:#F0677B;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1100px 560px at 18% -12%, rgba(214,179,90,.15), transparent 60%),
             radial-gradient(900px 500px at 100% 110%, rgba(179,18,46,.12), transparent 60%), var(--negro);
  color:var(--txt); font-family:'Inter', -apple-system, system-ui, sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--oro)}

/* ── página que enseña los móviles ─────────────────────────────── */
.m-cab{display:flex; align-items:center; gap:18px; padding:18px 28px; flex-wrap:wrap; border-bottom:1px solid var(--filo)}
.m-marca img{width:64px; display:block; filter:drop-shadow(0 8px 20px rgba(214,179,90,.25))}
.m-tit h1{margin:0; font-family:var(--serif); font-size:2.1rem; font-weight:600; line-height:1}
.m-tit p{margin:5px 0 0; color:var(--txt-2); font-size:13.5px}
.roles{margin-left:auto; display:flex; background:var(--sup); border:1px solid var(--filo-2); border-radius:30px; padding:4px}
.roles button{border:0; background:none; border-radius:24px; padding:9px 20px; font-weight:600; font-size:14px; color:var(--txt-2)}
.roles button[aria-pressed="true"]{background:linear-gradient(180deg, var(--oro-2), var(--oro-3)); color:#17120A}
.m-volver{font-size:13.5px; text-decoration:none; font-weight:500}
.telefonos{display:flex; gap:48px; justify-content:center; align-items:flex-start; padding:34px 20px 60px; flex-wrap:wrap}
figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px}
figcaption{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:13px}
figcaption b{font-family:var(--serif); font-size:1.15rem; font-weight:600}
figcaption span{color:var(--txt-2)}
.m-notas{max-width:300px; font-size:14px; line-height:1.55; color:var(--txt-2); padding-top:10px}
.m-notas h2{font-family:var(--serif); font-size:1.7rem; color:var(--txt); margin:0 0 6px; font-weight:600}
.m-notas h3{color:var(--oro); font-size:12px; text-transform:uppercase; letter-spacing:.14em; margin:20px 0 8px}
.m-notas ul{padding-left:18px; margin:0} .m-notas li{margin-bottom:7px} .m-notas b{color:var(--txt)}

/* ── los marcos ─────────────────────────────────────────────────── */
.marco{position:relative; width:390px; height:844px; border-radius:58px; padding:11px; background:linear-gradient(145deg, #2A2620, #0E0D0B);
  box-shadow:0 0 0 1.5px #3E3829, 0 50px 90px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(214,179,90,.2)}
.marco.android{width:396px; height:852px; border-radius:42px; padding:9px; background:linear-gradient(145deg, #25231F, #0D0C0A)}
.pantalla-tel{position:relative; width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column;
  background:radial-gradient(420px 260px at 90% -5%, rgba(214,179,90,.13), transparent 70%), var(--negro); color:var(--txt)}
.scroll{flex:1; min-height:0; overflow:hidden auto; scrollbar-width:none; overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.ios{border-radius:47px; font-family:-apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif}
.android{border-radius:33px; font-family:'Roboto', system-ui, sans-serif}
.isla{position:absolute; top:22px; left:50%; width:120px; height:35px; margin-left:-60px; background:#000; border-radius:20px; z-index:9}
.camara{position:absolute; top:20px; left:50%; width:13px; height:13px; margin-left:-6px; background:#000; border-radius:50%; z-index:9; box-shadow:0 0 0 2px #1a1a1a}
.pant{padding:0 18px 26px}
.android .pant{padding:0 16px 24px}

.st-bar{position:relative; flex:none; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:17px 30px 9px 36px; font-size:15px;
  background:linear-gradient(180deg, var(--negro) 70%, rgba(10,9,7,0))}
.android .st-bar{padding:12px 24px 7px; font-size:13px}
.st-bar b{font-weight:600}
.st-iconos{display:flex; gap:3px; align-items:flex-end}
.st-iconos i{width:3.5px; background:currentColor; border-radius:1px}
.st-iconos i:nth-child(1){height:6px} .st-iconos i:nth-child(2){height:9px} .st-iconos i:nth-child(3){height:12px}
.st-iconos em{width:24px; height:11px; border:1.5px solid currentColor; border-radius:3.5px; margin-left:5px; position:relative; opacity:.9}
.st-iconos em::after{content:''; position:absolute; inset:1.5px 6px 1.5px 1.5px; background:currentColor; border-radius:1.5px}

/* ── cabecera ───────────────────────────────────────────────────── */
.cab-app{padding:8px 2px 14px; display:flex; flex-direction:column; gap:2px}
.cab-app.corto{flex-direction:row; justify-content:space-between; align-items:center; padding:6px 0 10px}
.cab-fila{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px}
.ceja{margin:0; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oro)}
.ceja img{width:20px; height:20px; object-fit:contain}
.cab-app h1, .titulo-sub{margin:0; font-family:var(--serif); font-weight:600; font-size:36px; line-height:1.05; letter-spacing:-.005em}
.titulo-sub{font-size:30px; margin:4px 2px 14px; line-height:1.12}
.android .cab-app h1{font-size:34px}
.boton-cab{width:38px; height:38px; border-radius:50%; border:1px solid var(--filo-2); background:var(--sup); color:var(--oro); display:grid; place-items:center}
.atras{border:0; background:none; display:flex; align-items:center; gap:2px; color:var(--oro); font-size:16px; font-weight:500; padding:6px 0}

/* selector de negocio: chips con el emblema de cada casa */
.negs{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin:0 -18px 16px; padding:0 18px}
.android .negs{margin:0 -16px 16px; padding:0 16px}
.negs::-webkit-scrollbar{display:none}
.negs button{flex:none; display:flex; align-items:center; gap:7px; border:1px solid var(--filo); background:var(--sup); color:var(--txt-2);
  border-radius:22px; padding:6px 13px 6px 7px; font-size:13px; font-weight:600; transition:all .2s}
.negs img{width:22px; height:22px; object-fit:contain}
.negs button[aria-pressed="true"]{background:linear-gradient(180deg, rgba(240,212,138,.22), rgba(168,130,47,.18)); border-color:var(--oro); color:var(--oro-2)}

/* ── bloques ────────────────────────────────────────────────────── */
.heroe{position:relative; overflow:hidden; border-radius:22px; padding:18px 18px 16px; margin-bottom:12px;
  background:linear-gradient(155deg, #221C11 0%, #120F0A 55%, #0D0B08 100%); border:1px solid var(--filo-2)}
.heroe::after{content:''; position:absolute; right:-40px; top:-60px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(214,179,90,.2), transparent 70%); pointer-events:none}
.heroe.corto{padding:16px 18px}
.heroe-cab{display:flex; justify-content:space-between; align-items:center}
.heroe-cab small{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2)}
.heroe-cifra{display:block; font-family:var(--serif); font-weight:600; font-size:50px; line-height:1.05; margin:4px 0 2px;
  background:linear-gradient(180deg, var(--oro-2), var(--oro) 60%, var(--oro-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.heroe.corto .heroe-cifra{font-size:40px}
.heroe-pie{font-size:13px; color:var(--txt-2)}
.barras7{display:flex; gap:8px; align-items:flex-end; height:62px; margin-top:12px}
.barras7 span{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px}
.barras7 i{width:100%; border-radius:5px 5px 2px 2px; background:rgba(214,179,90,.28)}
.barras7 i.hoy{background:linear-gradient(180deg, var(--oro-2), var(--oro-3))}
.barras7 small{font-size:10px; color:var(--txt-3); text-transform:capitalize}

.mosaico{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px}
.mosaico button{text-align:left; border:1px solid var(--filo); background:var(--sup); border-radius:18px; padding:13px 14px; display:flex; flex-direction:column; gap:1px}
.mosaico small{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.mosaico b{font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.15; color:var(--txt)}
.mosaico span{font-size:12.5px; color:var(--txt-2)}

.cifras3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.cifras3 div{border:1px solid var(--filo); background:var(--sup); border-radius:16px; padding:11px 8px; text-align:center}
.cifras3 b{display:block; font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.1}
.cifras3 small{font-size:11.5px; color:var(--txt-3)}

.sec{display:flex; align-items:center; gap:7px; margin:22px 4px 9px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oro)}
.sec img{width:18px; height:18px; object-fit:contain}

.lista{background:var(--sup); border:1px solid var(--filo); border-radius:18px; overflow:hidden}
.fila, .correo{display:flex; align-items:center; gap:12px; padding:12px 14px; width:100%; text-align:left; border:0; background:none; position:relative}
.fila + .fila, .correo + .correo{border-top:1px solid rgba(214,179,90,.09)}
button.fila:active, .correo:active{background:var(--sup-2)}
.fila.alta{align-items:flex-start}
.fila-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.fila-txt b{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fila-txt small{font-size:12.5px; color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fila.alta .fila-txt small{white-space:normal}
.fila-der{margin-left:auto; flex:none; font-size:14.5px; font-weight:600; color:var(--txt); display:flex; align-items:center}
.fila-der.col{flex-direction:column; align-items:flex-end; gap:5px}
.fila-der.tenue{color:var(--txt-3)}
.fila-emb{width:34px; height:34px; object-fit:contain; flex:none; padding:4px; border-radius:11px; background:var(--sup-3); border:1px solid var(--filo)}
.fila-ico{width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center; background:rgba(214,179,90,.12); color:var(--oro)}
.fila-ico.rojo{background:rgba(240,113,104,.13); color:var(--rojo)}
.fila-ico.ambar{background:rgba(233,176,74,.13); color:var(--ambar)}
.fila-ico.oro{background:rgba(214,179,90,.14); color:var(--oro-2)}
.avatar{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--c); background:color-mix(in srgb, var(--c) 14%, var(--sup)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent)}
.avatar.vivo{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 0 2px var(--negro), 0 0 0 3.5px var(--verde)}
.avatar-g{width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:32px; font-weight:600; color:#17120A;
  background:linear-gradient(145deg, var(--oro-2), var(--oro-3)); box-shadow:0 12px 30px -10px rgba(214,179,90,.5)}
.dia-caja{width:42px; height:44px; flex:none; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--sup-3); border:1px solid var(--filo)}
.dia-caja b{font-family:var(--serif); font-size:20px; line-height:1} .dia-caja small{font-size:10px; text-transform:uppercase; color:var(--txt-3); letter-spacing:.05em}
.dia-caja.oro{background:linear-gradient(160deg, var(--oro-2), var(--oro-3)); color:#17120A; border:0} .dia-caja.oro small{color:#3a2d12}

.pill{display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:rgba(182,171,150,.12); color:var(--txt-2); white-space:nowrap}
.pill.verde{background:rgba(79,212,151,.13); color:var(--verde)}
.pill.ambar{background:rgba(233,176,74,.14); color:var(--ambar)}
.pill.rojo{background:rgba(240,113,104,.14); color:var(--rojo)}
.rojo{color:var(--rojo) !important}
.mini{flex:none; border:1px solid var(--filo-2); background:transparent; color:var(--oro-2); border-radius:16px; padding:6px 12px; font-size:12.5px; font-weight:600}
.mini.oro{background:linear-gradient(180deg, var(--oro-2), var(--oro-3)); color:#17120A; border:0}

.seg{display:flex; background:var(--sup); border:1px solid var(--filo); border-radius:14px; padding:3px; margin:4px 0 4px}
.seg button{flex:1; border:0; background:none; border-radius:11px; padding:8px 4px; font-size:13px; font-weight:600; color:var(--txt-2)}
.seg button[aria-pressed="true"]{background:var(--sup-3); color:var(--oro-2); box-shadow:inset 0 0 0 1px var(--filo-2)}

.boton-oro, .boton-sec{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; padding:14px 16px; font-size:15.5px; font-weight:650}
.boton-oro{border:0; color:#17120A; background:linear-gradient(180deg, var(--oro-2), var(--oro) 55%, var(--oro-3)); box-shadow:0 12px 26px -12px rgba(214,179,90,.7)}
.boton-sec{border:1px solid var(--filo-2); background:var(--sup); color:var(--oro-2)}
.boton-sec.rojo{color:var(--rojo); border-color:rgba(240,113,104,.3)}
.ancho{width:100%; margin-top:14px}
.dos-botones{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.dos-botones .boton-sec{font-size:14px; padding:12px 10px}
.android .boton-oro, .android .boton-sec{border-radius:24px}
.nota{font-size:12.5px; color:var(--txt-3); text-align:center; margin:16px 10px; line-height:1.5}
.nota.izq{text-align:left; margin:8px 4px}
.vacio-app{display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 10px; color:var(--txt-3)}
.vacio-app svg{color:var(--verde); opacity:.8} .vacio-app p{margin:0; font-size:13.5px}
.tarjeta{background:var(--sup); border:1px solid var(--filo); border-radius:18px; padding:14px 16px; margin-top:12px}
.tarjeta-cab{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.tarjeta-cab h2{margin:0; font-family:var(--serif); font-size:20px; font-weight:600}
.tarjeta-cab span{font-size:13px; color:var(--txt-2)}
.barra{display:block; height:7px; border-radius:4px; background:var(--sup-3); overflow:hidden}
.barra i{display:block; height:100%; background:linear-gradient(90deg, var(--oro-3), var(--oro-2)); border-radius:4px}

/* ── fichar ─────────────────────────────────────────────────────── */
.fichar{position:relative; overflow:hidden; text-align:center; border-radius:26px; padding:22px 18px 18px;
  background:radial-gradient(260px 200px at 50% 45%, rgba(214,179,90,.16), transparent 70%), linear-gradient(170deg, #1B170F, #0E0C08); border:1px solid var(--filo-2)}
.fichar.dentro{background:radial-gradient(260px 200px at 50% 45%, rgba(79,212,151,.14), transparent 70%), linear-gradient(170deg, #10201A, #0A0F0C); border-color:rgba(79,212,151,.3)}
.fichar.en-pausa{background:radial-gradient(260px 200px at 50% 45%, rgba(233,176,74,.16), transparent 70%), linear-gradient(170deg, #22190C, #0F0C07); border-color:rgba(233,176,74,.3)}
.fichar-est{margin:0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2)}
.fichar-reloj{margin:2px 0 16px; font-family:var(--serif); font-size:60px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.aro{width:188px; height:188px; border-radius:50%; margin:0 auto; border:0; padding:8px; display:block; transition:transform .12s}
.aro:active{transform:scale(.97)}
.aro.entrar{background:conic-gradient(from 200deg, var(--oro-2), var(--oro-3), var(--oro-2), var(--oro), var(--oro-2)); box-shadow:0 0 50px -8px rgba(214,179,90,.55)}
.aro.salir{background:conic-gradient(from 200deg, #F5998F, #B8392F, #F5998F); box-shadow:0 0 50px -10px rgba(240,113,104,.5)}
.aro-in{width:100%; height:100%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:radial-gradient(circle at 40% 30%, #221C12, #0C0A07); color:var(--oro-2)}
.aro.salir .aro-in{color:#F7B3AC}
.aro-in b{font-size:16px; font-weight:650; color:var(--txt)}
.fichar .boton-sec{margin-top:16px; padding:10px 18px; font-size:14px}
.gps{margin:16px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; color:var(--txt-2)}
.gps span{color:var(--verde); display:flex}
.linea-turno{position:relative; height:12px; border-radius:6px; background:var(--sup-3)}
.linea-turno i{position:absolute; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg, var(--oro-3), var(--oro-2))}
.linea-turno b{position:absolute; top:-5px; bottom:-5px; width:2.5px; margin-left:-1px; background:var(--txt); border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,.6)}
.linea-eje{display:flex; justify-content:space-between; font-size:11px; color:var(--txt-3); margin-top:6px}
.tira-dias{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:12px}
.tira-dias span{display:flex; flex-direction:column; align-items:center; padding:7px 0; border-radius:12px; border:1px solid var(--filo); background:var(--sup); color:var(--txt-3)}
.tira-dias span.si{color:var(--txt); border-color:var(--filo-2)}
.tira-dias span.hoy{background:linear-gradient(170deg, var(--oro-2), var(--oro-3)); color:#17120A; border:0}
.tira-dias small{font-size:10px; text-transform:uppercase} .tira-dias b{font-family:var(--serif); font-size:19px; line-height:1.1}
.perfil{display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0 18px}
.perfil b{font-family:var(--serif); font-size:24px; font-weight:600; margin-top:10px} .perfil small{color:var(--txt-2); font-size:13.5px}

/* ── facturas ───────────────────────────────────────────────────── */
.empresas{display:grid; gap:8px}
.empresas button{display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--filo); background:var(--sup); border-radius:16px; padding:10px 12px}
.empresas img{width:34px; height:34px; object-fit:contain}
.empresas span{display:flex; flex-direction:column; min-width:0}
.empresas b{font-size:14.5px} .empresas small{font-size:12px; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.empresas button[aria-pressed="true"]{border-color:var(--oro); background:linear-gradient(180deg, rgba(240,212,138,.12), rgba(168,130,47,.08))}
.form{display:flex; flex-direction:column; gap:11px; background:var(--sup); border:1px solid var(--filo); border-radius:18px; padding:14px; margin-bottom:12px}
.form label{display:flex; flex-direction:column; gap:5px}
.form label > span, .form-et{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.form input, .form select, .form textarea, .hoja-txt{font:inherit; font-size:16px; color:var(--txt); background:var(--negro); border:1px solid var(--filo-2); border-radius:12px; padding:11px 12px; width:100%; min-width:0}
.form textarea, .hoja-txt{resize:none; line-height:1.5}
.form input:focus, .form select:focus, .form textarea:focus, .hoja-txt:focus{outline:0; border-color:var(--oro); box-shadow:0 0 0 3px rgba(214,179,90,.15)}
.form .dos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form .seg{background:var(--negro)}
.papel-app{position:relative; overflow:hidden; background:#FBF8F1; color:#221E18; border-radius:16px; padding:18px 16px; font-size:12.5px; border-top:5px solid var(--c); box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}
.pa-cab{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px}
.pa-cab img{height:46px; max-width:130px; object-fit:contain}
.pa-cab div{text-align:right; display:flex; flex-direction:column}
.pa-cab b{color:var(--c); letter-spacing:.12em; font-size:13px} .pa-cab small{color:#6B655B}
.pa-partes{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 0; border-top:1px solid #E7E1D5; border-bottom:1px solid #E7E1D5; margin-bottom:8px}
.pa-partes p{margin:0; line-height:1.4; display:flex; flex-direction:column}
.pa-partes span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--c); font-weight:700}
.pa-l{display:flex; justify-content:space-between; gap:10px; padding:6px 0}
.pa-l + .pa-l{border-top:1px solid #EFEAE0}
.pa-l.tenue{color:#857E73}
.pa-l.total{border-top:2px solid #221E18; font-size:16px; margin-top:4px} .pa-l.total b{color:var(--c)}
.pa-sello{position:absolute; right:14px; top:92px; transform:rotate(-12deg); font-style:normal; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px;
  color:#0B8F5E; border:2px solid #0B8F5E; border-radius:8px; padding:2px 9px; opacity:.75}
.pa-sello.rojo{color:#C5372C !important; border-color:#C5372C}

/* ── correo ─────────────────────────────────────────────────────── */
.buzones{display:flex; flex-wrap:wrap; gap:4px 10px; margin:-6px 4px 10px; font-size:11.5px; color:var(--txt-3)}
.buscador{display:flex; align-items:center; gap:8px; background:var(--sup); border:1px solid var(--filo); border-radius:14px; padding:0 12px; color:var(--txt-3); margin-bottom:10px}
.buscador input{flex:1; min-width:0; border:0; background:none; color:var(--txt); font:inherit; font-size:15px; padding:11px 0; outline:0}
.chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -18px 4px; padding:0 18px 2px}
.android .chips{margin:0 -16px 4px; padding:0 16px 2px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none; display:flex; align-items:center; gap:6px; border:1px solid var(--filo); background:var(--sup); color:var(--txt-2); border-radius:18px; padding:6px 12px; font-size:12.5px; font-weight:600}
.chips i{width:7px; height:7px; border-radius:50%; background:var(--c)}
.chips b{font-size:11px; color:var(--oro-2)}
.chips button[aria-pressed="true"]{border-color:var(--c, var(--oro)); color:var(--txt); background:color-mix(in srgb, var(--c, #D6B35A) 16%, var(--sup))}
.correo{align-items:flex-start}
.correo.nuevo::before{content:''; position:absolute; left:5px; top:24px; width:6px; height:6px; border-radius:50%; background:var(--oro)}
.correo-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.correo-l1{display:flex; justify-content:space-between; gap:8px}
.correo-l1 b{font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.correo.nuevo .correo-l1 b, .correo.nuevo .correo-asunto{font-weight:700; color:var(--txt)}
.correo-l1 time{font-size:12px; color:var(--txt-3); flex:none}
.correo-asunto{font-size:13.5px; color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.correo-ext{font-size:12.5px; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.correo-tags{display:flex; align-items:center; gap:7px; margin-top:4px; color:var(--txt-3)}
.correo-tags img{width:17px; height:17px; object-fit:contain}
.correo-tags small{font-size:11px}
.tag{font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; color:var(--c); background:color-mix(in srgb, var(--c) 15%, transparent)}
.tag.grande{font-size:12px; padding:4px 11px; margin-left:2px}
.remite{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.remite div{display:flex; flex-direction:column; min-width:0}
.remite b{font-size:15px} .remite small{font-size:12.5px; color:var(--txt-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.porque{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--txt-2); padding:10px 12px; border-radius:14px; line-height:1.45;
  background:color-mix(in srgb, var(--c) 9%, var(--sup)); border:1px solid color-mix(in srgb, var(--c) 28%, transparent)}
.porque svg{color:var(--c); flex:none; margin-top:1px} .porque b{color:var(--txt)}
.acciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.acciones .boton-oro, .acciones .boton-sec{padding:11px 15px; font-size:14px}
.hecho{display:inline-flex; align-items:center; gap:6px; color:var(--verde); font-size:13.5px; font-weight:600}
.cuerpo-mail{white-space:pre-wrap; font-size:15px; line-height:1.65; margin:18px 2px; color:var(--txt)}
.adjuntos{display:flex; flex-direction:column; gap:8px}
.adjuntos button{display:grid; grid-template-columns:auto 1fr; gap:0 11px; align-items:center; text-align:left; border:1px solid var(--filo); background:var(--sup); border-radius:14px; padding:9px 12px}
.adjuntos span{grid-row:span 2; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:10px; font-weight:800; color:var(--rojo); background:rgba(240,113,104,.12)}
.adjuntos b{font-size:13.5px} .adjuntos small{font-size:12px; color:var(--txt-3)}

/* ── hoja inferior, avisos y pestañas ───────────────────────────── */
.velo-app{position:absolute; inset:0; z-index:10; background:rgba(0,0,0,.55); backdrop-filter:blur(2px)}
.hoja{position:absolute; left:0; right:0; bottom:0; z-index:11; background:var(--sup-2); border-top:1px solid var(--filo-2); border-radius:26px 26px 0 0; padding:10px 18px 40px; animation:sube .28s cubic-bezier(.32,.72,0,1)}
.hoja h2{font-family:var(--serif); font-size:24px; font-weight:600; margin:6px 0 0}
.hoja-asa{width:40px; height:5px; border-radius:3px; background:var(--txt-3); margin:0 auto 8px; opacity:.6}
.aviso-app{position:absolute; left:14px; right:14px; bottom:104px; z-index:12; display:flex; gap:9px; align-items:center;
  background:rgba(28,24,18,.96); border:1px solid var(--filo-2); color:var(--txt); font-size:13.5px; padding:12px 14px; border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8); animation:sube .25s ease-out}
.aviso-app svg{color:var(--verde); flex:none}
@keyframes sube{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}

.tabs{position:relative; flex:none; display:flex; z-index:8}
.ios .tabs{background:rgba(14,12,9,.82); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border-top:1px solid var(--filo); padding:8px 6px 30px}
.android .tabs{background:#16130E; border-top:1px solid var(--filo); padding:12px 6px 26px}
.tabs button{flex:1; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--txt-3)}
.ios .tabs button{font-size:10.5px; font-weight:500}
.ios .tabs button[aria-current="true"]{color:var(--oro)}
.android .tabs button{font-size:12px; font-weight:500; gap:5px; color:var(--txt-2)}
.android .tab-ico{width:64px; height:32px; border-radius:16px; display:grid; place-items:center; transition:background .2s}
.android .tabs button[aria-current="true"] .tab-ico{background:rgba(214,179,90,.2); color:var(--oro-2)}
.android .tabs button[aria-current="true"]{color:var(--txt); font-weight:700}
.home-ind{position:absolute; bottom:9px; left:50%; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:var(--txt); opacity:.85; z-index:9}
.and-nav{position:absolute; bottom:9px; left:50%; width:108px; height:4px; margin-left:-54px; border-radius:3px; background:var(--txt); opacity:.5; z-index:9}

@media (max-width:860px){ .m-notas{max-width:none; padding:0 20px} }
@media (max-width:480px){
  .m-cab{padding:14px 16px}
  .roles{margin-left:0; width:100%} .roles button{flex:1}
  .telefonos{padding:18px 0 40px; gap:30px}
  .marco{width:100vw; height:800px; border-radius:0; padding:0; box-shadow:none; background:none}
  .marco .pantalla-tel{border-radius:0}
  .isla, .camara{display:none}
}
@media (prefers-reduced-motion:reduce){ .aviso-app, .hoja{animation:none} }

/* la serifa trae cifras «antiguas» (el 3 y el 9 bajan de la línea): en datos, alineadas */
.heroe-cifra, .mosaico b, .cifras3 b, .fichar-reloj, .dia-caja b, .tira-dias b, .avatar-g{font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1, "tnum" 1}
.tarjeta-cab h2{white-space:nowrap}
.tarjeta-cab span{font-size:12px; text-align:right}

/* ══ MODO DÍA ════════════════════════════════════════════════════
   Crema y oro oscuro. Las dos piezas estrella —la caja y el botón de
   fichar— siguen en negro y oro: en día son el acento, como una tarjeta
   de visita del grupo sobre papel. */
.roles.temas{margin-left:0}
.roles.temas button{display:flex; align-items:center; gap:6px; padding:9px 14px}
body[data-tema="dia"] .pantalla-tel{
  --negro:#F4EEE2; --sup:#FFFCF6; --sup-2:#FBF6EC; --sup-3:#F1E9DA;
  --filo:rgba(140,104,34,.16); --filo-2:rgba(140,104,34,.34);
  --oro:#9C7424; --oro-2:#B8892E; --oro-3:#7A5818;
  --txt:#1E1A14; --txt-2:#6B6152; --txt-3:#9A8F7C;
  --verde:#0B8F5E; --ambar:#B5710A; --rojo:#C5372C;
  background:radial-gradient(420px 260px at 90% -5%, rgba(214,179,90,.18), transparent 70%), var(--negro);
}
/* piezas que se quedan en noche aunque la app esté de día */
body[data-tema="dia"] :is(.heroe, .fichar, .aviso-app){
  --sup:#15120D; --sup-2:#1C1812; --sup-3:#241F17; --filo:rgba(214,179,90,.16); --filo-2:rgba(214,179,90,.32);
  --oro:#D6B35A; --oro-2:#F0D48A; --oro-3:#A8822F; --txt:#F5EFE3; --txt-2:#B6AB96; --txt-3:#7F7564;
  --verde:#4FD497; --ambar:#E9B04A; --rojo:#F07168; color:var(--txt)
}
body[data-tema="dia"] .ios .tabs{background:rgba(255,252,246,.86)}
body[data-tema="dia"] .android .tabs{background:#FBF6EC}
body[data-tema="dia"] .android .tabs button[aria-current="true"] .tab-ico{background:rgba(156,116,36,.16)}
body[data-tema="dia"] .lista, body[data-tema="dia"] .tarjeta, body[data-tema="dia"] .mosaico button, body[data-tema="dia"] .cifras3 div{box-shadow:0 1px 2px rgba(60,44,12,.05), 0 10px 24px -18px rgba(60,44,12,.35)}
body[data-tema="dia"] .negs button[aria-pressed="true"]{background:linear-gradient(180deg, rgba(214,179,90,.22), rgba(168,130,47,.12)); color:var(--oro-3)}
body[data-tema="dia"] .boton-oro{background:linear-gradient(180deg, #E6C46E, #C99A3C 55%, #9C7424); color:#1A1308}
body[data-tema="dia"] .mini.oro, body[data-tema="dia"] .dia-caja.oro, body[data-tema="dia"] .tira-dias span.hoy{background:linear-gradient(170deg, #E6C46E, #9C7424)}
body[data-tema="dia"] .avatar.vivo{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 0 2px var(--sup), 0 0 0 3.5px var(--verde)}
body[data-tema="dia"] .home-ind, body[data-tema="dia"] .and-nav{background:#1E1A14}
body[data-tema="dia"] .velo-app{background:rgba(30,26,20,.35)}