:root{--crema:#FBF6EE;--verde:#3A6B5C;--verde-osc:#2F5D50;--borde:#EADFCF;--texto:#2B3B35;--suave:#5B6B65;--rojo:#7A2018}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--crema);color:var(--texto);padding-bottom:calc(92px + env(safe-area-inset-bottom))}
button,input,select,textarea{font-family:inherit}
h1,h2{font-family:'Fraunces',Georgia,serif}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--verde-osc);outline-offset:2px}

/* temas de color (botones, formularios) */
.t-verde{--bg:#E3EFE9;--fg:#2F5D50;--bd:#B9D7CB}
.t-amarillo{--bg:#FFF3CC;--fg:#6B5000;--bd:#E8D79A}
.t-lavanda{--bg:#ECE7F8;--fg:#3B2F73;--bd:#CFC6EA}
.t-melocoton{--bg:#FDE6DD;--fg:#7A2E18;--bd:#F2C5B3}
.t-azul{--bg:#DDEFF3;--fg:#1F5666;--bd:#B6D9E1}
.t-rosa{--bg:#FBE3E6;--fg:#7A2236;--bd:#EBBFC7}

/* cabecera */
header{position:sticky;top:0;z-index:5;background:var(--verde);color:#fff;padding:calc(18px + env(safe-area-inset-top)) 16px 20px;border-radius:0 0 28px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;overflow:hidden}
.hflores{position:absolute;top:-34px;right:-28px;pointer-events:none}
.hizq{position:relative;min-width:0}
header small{display:block;font-size:.85rem;color:#DCEBE5;font-weight:600}
header h1{margin:2px 0 0;font-size:1.7rem;line-height:1.1}
header select{position:relative;max-width:48%;height:44px;border-radius:22px;border:0;background:var(--crema);color:var(--verde-osc);font-size:1rem;font-weight:800;padding:0 14px}
main{padding:16px;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}

/* menú inferior (móvil) */
nav{position:fixed;bottom:0;left:0;right:0;height:calc(76px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid var(--borde);z-index:6}
nav button{width:64px;height:56px;border:0;border-radius:18px;background:transparent;color:var(--suave);font-size:.7rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
nav button.act{background:#E3EFE9;color:var(--verde-osc);font-weight:800}

/* tarjetas */
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:22px;padding:16px;position:relative;overflow:hidden}
.tarjeta h2{font-size:1.15rem;margin:0 0 10px;color:var(--verde-osc)}
.tarjeta p{line-height:1.45}
.titulo{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;font-weight:700;color:var(--verde-osc);margin:6px 0 0}
.flor-esq{position:absolute;top:-16px;right:-14px;pointer-events:none}

/* botones rápidos */
.rapidos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.q{height:84px;border:0;border-radius:20px;background:var(--bg);color:var(--texto);display:flex;align-items:center;gap:10px;padding:0 12px;text-align:left;font-size:.95rem;font-weight:800;line-height:1.15}
.qi{width:40px;height:40px;border-radius:20px;background:#fff;color:var(--fg);display:flex;align-items:center;justify-content:center;flex:none}
.principal{background:var(--verde);color:#fff;border:0;height:54px;padding:0 18px;border-radius:18px;font-size:1rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer}
button.sec{background:#fff;border:1.5px solid var(--borde);min-height:44px;padding:0 14px;border-radius:14px;font-size:.9rem;font-weight:800;color:var(--verde-osc)}
button.peligro{color:#8E2E1F;border-color:#E3B1A8}
button.icono{width:44px;height:44px;padding:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#8A4A3D;flex:none}
button:disabled{opacity:.6}
.ancho{width:100%}

/* avisos */
.aviso{background:#FDE6DD;border:1px solid #F2C5B3;border-radius:20px;padding:14px;display:flex;gap:12px;align-items:center;font-size:.9rem;line-height:1.35;margin:10px 0}
.aviso .qi{color:#A5472B}
.aviso.suave{background:#FFF3CC;border-color:#E8D79A}
.aviso a{color:var(--verde-osc);font-weight:800}

/* filas de listas */
.fila{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #F1E8DA}
.fila:first-of-type{border-top:0}
.fila .circ{width:44px;height:44px;border-radius:22px;background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;flex:none}
.fila .cuerpo{flex:1;min-width:0}
.peq{font-size:.8rem;color:var(--suave);font-weight:600}
.cuerpo b{font-weight:800}
.ok{color:#2F7A55}.mal{color:#8E2E44}

/* resumen */
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi div{background:var(--crema);border-radius:16px;padding:10px 12px;font-size:.75rem;font-weight:700;color:var(--suave)}
.kpi b{display:block;font-size:1.35rem;color:var(--texto);font-weight:800}
.kpi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi3 div{border-radius:18px;padding:12px 10px;font-size:.75rem;font-weight:700;background:var(--bg);color:var(--fg)}
.kpi3 b{display:block;font-size:1.05rem;color:var(--texto);font-weight:800;margin-top:2px}
.saldo{margin-top:12px;background:#E3EFE9;border-radius:16px;padding:12px;display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--verde-osc)}
.barra{height:12px;border-radius:6px;background:#EFE6D6;overflow:hidden;margin-top:10px}
.barra i{display:block;height:12px;background:#E9A99C;border-radius:6px}

/* selector de mes */
.selmes{display:flex;gap:8px;align-items:center;justify-content:space-between}
.selmes .mes{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;font-weight:700;color:var(--verde-osc)}
.selmes .mes::first-letter{text-transform:uppercase}
.selmes button{width:44px;height:44px;border-radius:22px;border:1.5px solid var(--borde);background:#fff;color:var(--verde-osc);display:flex;align-items:center;justify-content:center}
.interr{display:flex;background:#EFE6D6;border-radius:16px;padding:4px}
.interr button{flex:1;height:44px;border-radius:12px;border:0;background:transparent;color:var(--suave);font-size:.95rem;font-weight:700}
.interr button.act{background:#fff;color:var(--verde-osc);font-weight:800}

/* calendario */
.sem,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sem{text-align:center;font-size:.75rem;font-weight:800;color:var(--suave)}
.dia{height:52px;border-radius:14px;border:1.5px solid var(--borde);background:#fff;color:var(--texto);padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:.95rem;font-weight:800}
.dia .marcas{height:12px;display:flex;align-items:center;justify-content:center;gap:2px}
.dia .punto{width:6px;height:6px;border-radius:3px;background:var(--verde);display:inline-block}
.dia.verde{background:#CFE8DC;border-color:#9CCDB6;color:#1F4D3F}
.dia.rojo{background:#F6C9C4;border-color:#E39B93;color:#7A2018}
.dia.vac{background:#FFF3CC;border-color:#E8D79A;color:#6B5000}
.dia.hoy{text-decoration:underline;text-underline-offset:3px;font-weight:900}
.dia.sel{border:3px solid var(--verde-osc)}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.75rem;font-weight:700;color:#4A5852}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:16px;height:16px;border-radius:5px;display:inline-block;border:1.5px solid}
.estado{border-radius:14px;padding:10px 12px;font-size:.9rem;font-weight:700;display:flex;gap:10px;align-items:center;margin:8px 0}
.estado.verde{background:#CFE8DC;color:#1F4D3F}
.estado.rojo{background:#F6C9C4;color:#5C170F}
.estado.vac{background:#FFF3CC;color:#5B4300}
.item{display:flex;gap:12px;align-items:center;padding:8px 2px;border-top:1px solid #F1E8DA;font-size:.95rem;font-weight:700}
.item input[type=checkbox]{width:26px;height:26px;min-height:0;accent-color:var(--verde);flex:none}
.item .cuerpo{flex:1}
.item .hechoTxt{text-decoration:line-through;color:var(--suave)}
.dosbot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.dosbot button{min-height:48px;border-radius:14px;border:2px solid transparent;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px}
.b-verde{background:#CFE8DC;border-color:#9CCDB6!important;color:#1F4D3F}
.b-rojo{background:#F6C9C4;border-color:#E39B93!important;color:#7A2018}
.b-tarea{background:var(--verde);color:#fff}
.b-evento{background:#5B4A9A;color:#fff}

/* formularios de colores */
dialog{border:0;border-radius:26px;padding:0;width:min(92vw,440px);max-height:92vh;overflow:auto;background:var(--bg);color:#2B2B2B}
dialog::backdrop{background:rgba(30,40,35,.45)}
#formModal{position:relative;padding:20px 22px 22px;overflow:hidden}
#formModal>*{position:relative}
#formModal .flor-a{position:absolute;top:-40px;right:-34px;pointer-events:none}
#formModal .flor-b{position:absolute;bottom:-18px;left:-14px;pointer-events:none}
.fcirc{width:52px;height:52px;border-radius:26px;background:#fff;color:var(--fg);display:flex;align-items:center;justify-content:center}
#formModal h2{font-size:1.5rem;margin:10px 0 2px;color:var(--fg)}
label{display:block;font-size:.85rem;font-weight:800;margin:12px 0 4px;color:var(--fg,var(--verde-osc))}
input,select,textarea{width:100%;padding:12px 14px;min-height:50px;border:1.5px solid var(--bd,#CFC6EA);border-radius:16px;font-size:1rem;background:#fff;color:#2B2B2B}
input[type=checkbox]{width:24px;height:24px;min-height:0;accent-color:var(--fg)}
label.chk{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--bd);border-radius:16px;padding:12px 14px;color:#2B2B2B;font-weight:700}
.botones{display:flex;gap:10px;margin-top:18px}
.botones button{flex:1;height:54px;border-radius:18px;font-size:1rem;font-weight:800}
.botones .cancelar{background:transparent;border:2px solid var(--fg);color:var(--fg)}
.botones .guardar{flex:1.4;background:var(--fg);border:0;color:#fff}
img.ticket{max-width:100%;border-radius:12px;margin-top:6px}
.vacio{text-align:center;color:var(--suave);padding:22px 8px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border-radius:14px;padding:6px 12px;font-size:.8rem;font-weight:800}
.avatar{width:60px;height:60px;border-radius:30px;background:#FDE6DD;color:#A5472B;font-family:'Fraunces',serif;font-size:1.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

/* pantallas sueltas: entrada, instalador y avisos */
body.pagina-sola{padding:0;min-height:100vh;display:flex}
.caja-centro{margin:auto;width:100%;max-width:460px;padding:24px 16px}
.entrada h1{margin:0;font-size:2rem;color:var(--verde-osc)}
.entrada .peq{margin:4px 0 8px}
.entrada h2{font-size:1.1rem;margin:0 0 4px}

/* ordenador y tabletas grandes: menú lateral */
@media (min-width:900px){
  body{padding-bottom:24px;padding-left:220px}
  nav{top:0;bottom:0;right:auto;left:0;width:220px;height:auto;padding:24px 12px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px;border-top:0;border-right:1px solid var(--borde)}
  nav button{width:auto;height:52px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 14px;font-size:.95rem}
  main{max-width:820px}
  .rapidos{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.pagina-sola{padding-left:0}
}