:root{
  --navy:#16306b; --navy-2:#0d1f4a; --azul:#2456c9;
  --teal:#14b3aa; --teal-2:#0e8f88; --teal-s:#dcf6f3;
  --verde:#2f9a1f; --verde-s:#e3f6dc;
  --sol:#ffc23d; --sol-2:#f5a800; --sol-s:#fff3d1;
  --coral:#e5483a; --coral-s:#ffe5e1;
  --lila:#7b5cd6; --lila-s:#ece6ff;
  --crema:#fffaf2; --ink:#1a2547; --muted:#5a6684; --borde:#e6e9f2;
  --sombra:0 8px 24px -14px rgba(22,48,107,.4);
  --t:"Fredoka","Nunito",system-ui,sans-serif;
  --f:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav:68px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f);color:var(--ink);background:var(--crema);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--t);font-weight:600;margin:0;line-height:1.15;color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:var(--azul)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:0;border-radius:999px;padding:.72em 1.15em;font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .12s, filter .12s;line-height:1.1}
.btn:active{transform:scale(.97)}
.btn--sol{background:var(--sol);color:var(--navy-2);box-shadow:0 4px 0 var(--sol-2)}
.btn--azul{background:var(--navy);color:#fff;box-shadow:0 4px 0 var(--navy-2)}
.btn--wa{background:#25d366;color:#fff;box-shadow:0 4px 0 #179c4a}
.btn--suave{background:#eef2fb;color:var(--navy)}
.btn--linea{background:#fff;color:var(--navy);border:2px solid var(--borde)}
.btn--peligro{background:var(--coral-s);color:var(--coral)}
.btn--chico{padding:.5em .85em;font-size:.88rem}
.btn--ancho{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(600px 400px at 80% 0%,rgba(20,179,170,.2),transparent),radial-gradient(500px 400px at 0% 100%,rgba(255,194,61,.25),transparent),var(--crema)}
.login__caja{width:min(400px,100%);background:#fff;border-radius:28px;padding:30px 24px;box-shadow:0 30px 60px -30px rgba(22,48,107,.5);text-align:center;display:grid;gap:14px}
.login__caja img{margin:0 auto;width:140px;height:auto}
.login__caja h1{font-size:1.7rem}
.login__caja p{margin:0;color:var(--muted)}
.login__caja .campo{text-align:left}
.login__error{color:var(--coral)!important;font-weight:800}
.login__volver{font-size:.9rem;color:var(--muted);text-decoration:none}

/* Campos */
.campo{display:flex;flex-direction:column;gap:5px}
.campo>span{font-weight:800;font-size:.88rem;color:var(--navy)}
.campo small{color:var(--muted);font-weight:600}
.campo input,.campo select,.campo textarea,.buscar input{border:2px solid var(--borde);border-radius:14px;padding:12px 13px;background:#fbfcff;width:100%;font-size:1rem;font-weight:600}
.campo textarea{resize:vertical;min-height:90px;line-height:1.4}
.campo input:focus,.campo select:focus,.campo textarea:focus,.buscar input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-s);background:#fff}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Cabecera y nav */
.cab{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(255,250,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.cab img{width:46px;height:auto}
.cab h1{font-size:1.35rem;flex:1}
.cab__btn{width:42px;height:42px;border-radius:50%;border:0;background:#eef2fb;color:var(--navy);font-size:1.3rem;cursor:pointer}
.cab__btn.girando{animation:girar .8s linear infinite}
@keyframes girar{to{rotate:360deg}}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--borde);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -20px rgba(22,48,107,.5)}
.nav button{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.72rem;font-weight:800;color:var(--muted);padding:6px 0;border-radius:14px;cursor:pointer}
.nav button span{font-size:1.35rem;line-height:1.1;filter:grayscale(.7);opacity:.75;transition:.15s}
.nav button.activo{color:var(--navy);background:var(--teal-s)}
.nav button.activo span{filter:none;opacity:1;transform:translateY(-1px)}
.burbuja{position:absolute;top:2px;right:calc(50% - 22px);min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--coral);color:#fff;font-style:normal;font-size:.7rem;display:grid;place-items:center;font-weight:800}

.vistas{padding:16px 16px calc(var(--nav) + 96px);max-width:900px;margin:0 auto}
.vista{display:none;animation:entrar .25s ease}
.vista.activa{display:block}
@keyframes entrar{from{opacity:0;translate:0 8px}}

.fab{position:fixed;right:16px;bottom:calc(var(--nav) + 16px + env(safe-area-inset-bottom));z-index:35;border:0;border-radius:999px;background:var(--sol);color:var(--navy-2);box-shadow:0 5px 0 var(--sol-2),0 14px 30px -10px rgba(0,0,0,.35);padding:14px 20px 14px 16px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;cursor:pointer}
.fab span{font-size:1.5rem;line-height:1}

/* Bloques */
.saludo{margin:4px 0 14px}
.saludo h2{font-size:1.5rem}
.saludo p{margin:2px 0 0;color:var(--muted);font-weight:600}
.saludo p::first-letter{text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.stat{background:#fff;border-radius:18px;padding:12px;box-shadow:var(--sombra);text-align:center}
.stat b{display:block;font:600 1.6rem var(--t);color:var(--navy)}
.stat span{font-size:.78rem;color:var(--muted);font-weight:700}
.sec{margin:22px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec h3{font-size:1.15rem}
.sec small{color:var(--muted);font-weight:700}
.vacio{background:#fff;border:2px dashed var(--borde);border-radius:18px;padding:18px;text-align:center;color:var(--muted);font-weight:700}
.ayuda{background:var(--teal-s);color:#0b5f5a;border-radius:16px;padding:12px 14px;font-size:.92rem;font-weight:600;margin-bottom:14px}

.tarjeta{background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sombra);margin-bottom:10px;border-left:6px solid var(--teal)}
.tarjeta--rojo{border-left-color:var(--coral)}
.tarjeta--sol{border-left-color:var(--sol)}
.tarjeta--azul{border-left-color:var(--azul)}
.tarjeta__top{display:flex;gap:12px;align-items:flex-start}
.tarjeta__emoji{flex:none;width:46px;height:46px;border-radius:14px;background:var(--sol-s);display:grid;place-items:center;font-size:1.5rem}
.tarjeta__txt{flex:1;min-width:0}
.tarjeta__txt b{font-family:var(--t);font-weight:600;color:var(--navy);font-size:1.08rem}
.tarjeta__txt p{margin:2px 0 0;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.tarjeta__acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.etq{display:inline-block;font-size:.72rem;font-weight:800;padding:.2em .6em;border-radius:99px;background:#eef2fb;color:var(--navy);vertical-align:middle}
.etq--rojo{background:var(--coral-s);color:var(--coral)}
.etq--verde{background:var(--verde-s);color:var(--verde)}
.etq--sol{background:var(--sol-s);color:#9a6c00}
.etq--gris{background:#f0f1f4;color:#7a8296}

/* Lista de clientes */
.buscar{position:sticky;top:67px;z-index:20;background:var(--crema);padding:2px 0 10px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--borde);background:#fff;border-radius:99px;padding:.4em .9em;font-weight:800;font-size:.85rem;cursor:pointer;color:var(--navy)}
.chip.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.buscar .chips{margin-top:8px}
.lista{display:grid;gap:8px}
.cli{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px;box-shadow:var(--sombra);cursor:pointer;border:0;text-align:left;width:100%}
.cli:active{transform:scale(.99)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 1.05rem var(--t);color:#fff;background:var(--teal)}
.cli__txt{flex:1;min-width:0}
.cli__txt b{display:block;color:var(--navy);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli__txt span{display:block;color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli__fin{font-size:.75rem;color:var(--muted);font-weight:700;text-align:right}
.contador{color:var(--muted);font-weight:700;font-size:.85rem;margin:4px 2px 8px}

/* Hoja (ventana desde abajo) */
.hoja-fondo{position:fixed;inset:0;z-index:60;background:rgba(10,20,50,.45);animation:aparecer .2s}
@keyframes aparecer{from{opacity:0}}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--crema);border-radius:26px 26px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));animation:subir .25s ease;box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
@keyframes subir{from{translate:0 40px;opacity:.4}}
.hoja__asa{width:44px;height:5px;border-radius:9px;background:#d5d9e4;margin:4px auto 10px}
.hoja__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;position:sticky;top:-8px;background:var(--crema);padding:8px 0;z-index:2}
.hoja__cab h2{font-size:1.35rem}
.cerrar{width:40px;height:40px;border-radius:50%;border:0;background:#eef2fb;font-size:1.2rem;cursor:pointer;color:var(--navy);flex:none}
.form{display:grid;gap:14px}
.pie-form{display:flex;gap:10px;margin-top:6px}
.pie-form .btn{flex:1}

.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tipo{border:2px solid var(--borde);background:#fff;border-radius:16px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-weight:800;font-size:.76rem;color:var(--navy)}
.tipo span{font-size:1.5rem}
.tipo.activo{border-color:var(--navy);background:#eef3ff;box-shadow:inset 0 0 0 1px var(--navy)}
.mascotas-sel{display:flex;flex-wrap:wrap;gap:8px}
.mascotas-sel button{border:2px solid var(--borde);background:#fff;border-radius:99px;padding:.5em 1em;font-weight:800;cursor:pointer;color:var(--navy)}
.mascotas-sel button.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.resultados{display:grid;gap:6px;margin-top:8px;max-height:44dvh;overflow-y:auto}
.prox-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.prox-chips button{border:0;background:#eef2fb;color:var(--navy);border-radius:99px;padding:.35em .8em;font-weight:800;font-size:.8rem;cursor:pointer}
.prox-chips button.activo{background:var(--teal);color:#fff}

/* Ficha del cliente */
.ficha-cab{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ficha-cab .avatar{width:58px;height:58px;font-size:1.4rem}
.ficha-cab h2{font-size:1.45rem}
.ficha-cab p{margin:2px 0 0;color:var(--muted);font-weight:700}
.ficha-acc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.nota-cli{background:var(--sol-s);border-radius:14px;padding:10px 12px;font-size:.92rem;margin-bottom:14px;white-space:pre-wrap}
.mascota{background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sombra);margin-bottom:12px}
.mascota__cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mascota__cab .tarjeta__emoji{width:42px;height:42px}
.mascota__cab div{flex:1;min-width:0}
.mascota__cab b{font:600 1.15rem var(--t);color:var(--navy)}
.mascota__cab small{display:block;color:var(--muted);font-weight:700}
.historial{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.historial li{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:14px;background:#f7f8fc}
.historial li>span{font-size:1.2rem}
.historial li div{flex:1;min-width:0;font-size:.9rem}
.historial li b{color:var(--navy)}
.historial li p{margin:2px 0 0;color:var(--muted);font-size:.84rem}
.mini{border:0;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:8px}
.mini:hover{background:#e9ecf5}

/* Mensajes */
.campana{display:flex;align-items:center;gap:12px}
.barra{height:10px;border-radius:9px;background:#eef2fb;overflow:hidden;margin-top:8px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#25d366);border-radius:9px;transition:width .3s}
.envio{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:var(--sombra)}
.envio.hecho{opacity:.6}
.envio div{flex:1;min-width:0}
.envio b{display:block;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio small{color:var(--muted);font-weight:700}
.vista-previa{background:#e7ffdb;border-radius:14px 14px 14px 4px;padding:10px 12px;white-space:pre-wrap;font-size:.92rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.marcadores{display:flex;flex-wrap:wrap;gap:6px}
.marcadores button{border:0;background:var(--teal-s);color:var(--teal-2);border-radius:99px;padding:.3em .7em;font-weight:800;font-size:.8rem;cursor:pointer}

/* Más */
.grupo{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--sombra);margin-bottom:14px;display:grid;gap:12px}
.grupo h3{font-size:1.1rem}
.grupo p{margin:0;color:var(--muted);font-size:.92rem}
.dias{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dias label{display:flex;align-items:center;gap:8px;background:#f7f8fc;border-radius:12px;padding:8px 10px;font-weight:700;font-size:.9rem}
.dias label span{flex:1}
.dias input{width:70px;border:2px solid var(--borde);border-radius:10px;padding:6px;text-align:center;font-weight:800}

.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 90px);translate:-50% 0;z-index:80;background:var(--navy-2);color:#fff;border-radius:16px;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:14px;font-weight:700;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);max-width:calc(100% - 32px);animation:subir .2s}
.toast button{border:0;background:var(--sol);color:var(--navy-2);border-radius:99px;padding:.4em .9em;font-weight:800;cursor:pointer}

/* Escritorio */
@media (min-width:900px){
  .nav{top:0;bottom:0;right:auto;width:110px;grid-template-columns:1fr;grid-auto-rows:min-content;gap:6px;padding:90px 10px 10px;border-top:0;border-right:1px solid var(--borde)}
  .nav button{font-size:.8rem;padding:12px 0}
  .cab{padding-left:126px}
  .vistas{padding:24px 24px 120px 134px;max-width:1040px}
  .fab{bottom:28px;right:28px}
  .toast{bottom:40px}
  .hoja{left:50%;right:auto;bottom:auto;top:50%;translate:-50% -50%;width:min(620px,94vw);border-radius:26px;max-height:88dvh;animation:aparecer .2s}
  .hoja__asa{display:none}
  .tipos{grid-template-columns:repeat(8,1fr)}
  .lista--2{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  .tipos{grid-template-columns:repeat(4,1fr)}
  .ficha-acc{grid-template-columns:1fr 1fr}
  .fab b{display:none}
  .fab{padding:14px}
  .fila2{grid-template-columns:1fr}
}