:root{
    --navy:#1f2a5a; --navy-2:#2a3a75; --navy-3:#39498c;
    --cream:#f4eee4; --cream-2:#ece4d5; --white:#ffffff;
    --ink:#22283f; --muted:#6b7288; --line:#d9d2c3;
    --ok:#2e7d52; --warn:#b26a00; --bad:#a63d3d;
    --shadow:0 10px 30px rgba(31,42,90,.10);
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);font-size:15px;line-height:1.55}

  /* ============ BARRA SUPERIOR ============ */
  .topbar{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;display:flex;align-items:center;gap:18px;padding:10px 22px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:10px;min-width:170px}
  .brand svg{flex:0 0 auto}
  .brand .b1{font-size:20px;font-weight:700;letter-spacing:.5px;line-height:1}
  .brand .b2{font-size:9.5px;letter-spacing:3.5px;opacity:.85}
  /* sesión + menú Ajustes en la barra navy (admin) */
  .tb-sesion{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .tb-ajustes{position:relative}
  .tb-gear{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:.3px}
  .tb-gear:hover{background:rgba(255,255,255,.22)}
  .tb-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:190px;padding:6px;z-index:60}
  .tb-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--navy);font-weight:600}
  .tb-menu button:hover{background:var(--cream)}

  /* ============ GENERALES ============ */
  .view{display:none}
  .view.act{display:block}
  .wrap{max-width:1180px;margin:0 auto;padding:28px 22px 60px}
  h2.sec{font-size:22px;color:var(--navy);letter-spacing:.3px;margin-bottom:4px}
  p.sub{color:var(--muted);margin-bottom:20px;font-size:13.5px}
  .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
  .grid{display:grid;gap:16px}
  .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .btn{display:inline-block;background:var(--navy);color:#fff;border:none;border-radius:9px;padding:10px 20px;font-size:12.5px;letter-spacing:.6px;font-weight:600;cursor:pointer;transition:.15s;text-transform:uppercase}
  .btn:hover{background:var(--navy-3)}
  .btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
  .btn.ghost:hover{background:var(--navy);color:#fff}
  .btn.sm{padding:6px 12px;font-size:11px}
  .chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:999px}
  .chip.ok{background:#e2f2e8;color:var(--ok)}
  .chip.warn{background:#fdf1dc;color:var(--warn)}
  .chip.bad{background:#f9e5e5;color:var(--bad)}
  .chip.info{background:#e4e8f7;color:var(--navy)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding:8px 10px;border-bottom:2px solid var(--line)}
  td{padding:10px;border-bottom:1px solid #eee7d9;vertical-align:middle}
  tr:last-child td{border-bottom:none}
  .note{background:var(--cream-2);border-left:4px solid var(--navy);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--ink)}
  .note b{color:var(--navy)}
  select,input[type=text],input[type=email],input[type=date],textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-family:inherit;font-size:13.5px;color:var(--ink)}
  select:focus,input:focus,textarea:focus{outline:none;border-color:var(--navy-3)}
  label.f{display:block;font-size:11.5px;font-weight:700;letter-spacing:.6px;color:var(--navy);text-transform:uppercase;margin:12px 0 5px}
  .reg-msg{font-size:12.5px;font-weight:600;margin-top:14px;display:none;padding:9px 12px;border-radius:8px}
  .reg-msg.show{display:block}
  .reg-msg.ok{color:var(--ok);background:#e2f2e8}
  .reg-msg.err{color:var(--bad);background:#f9e5e5}

  /* ============ LANDING ============ */
  .hero{background:linear-gradient(100deg,rgba(21,29,66,.94) 30%,rgba(31,42,90,.78)),var(--navy-2);color:#fff;padding:72px 22px 66px;position:relative;overflow:hidden}
  .hero .paw{position:absolute;right:-40px;bottom:-60px;opacity:.08;transform:rotate(-15deg)}
  .hero-in{max-width:1180px;margin:0 auto}
  .hero h1{font-size:52px;letter-spacing:2px;font-weight:800;line-height:1.05}
  .hero h1 span{color:#c9d2f2}
  .hero p{max-width:560px;margin:16px 0 26px;color:#dfe3f2;font-size:15.5px}
  .hero .btn.light{background:#fff;color:var(--navy)}
  .stripe{background:var(--cream);padding:46px 22px}
  .stripe.dark{background:var(--navy);color:#fff}
  .stripe-in{max-width:1180px;margin:0 auto}
  .steps{counter-reset:paso}
  .steps .card{position:relative;padding-top:26px}
  .steps .card::before{counter-increment:paso;content:counter(paso);position:absolute;top:-16px;left:18px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;border:3px solid var(--cream)}
  .svc h3{color:var(--navy);font-size:15.5px;margin-bottom:6px;letter-spacing:.3px}
  .svc p{font-size:13px;color:var(--muted)}
  .svc .tag{margin-bottom:10px}
  .conv-lock{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.4);border-radius:12px;padding:16px 18px;margin-top:18px;font-size:13px;color:#dfe3f2}
  footer{background:var(--navy);color:#c9cfe6;padding:26px 22px;font-size:12.5px}
  .foot-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

  /* ============ SUBNAV PORTALES ============ */
  .subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
  .subnav button{background:#fff;border:1.5px solid var(--line);color:var(--ink);padding:9px 18px;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;letter-spacing:.3px;transition:.15s}
  .subnav button:hover{border-color:var(--navy-3)}
  .subnav button.act{background:var(--navy);color:#fff;border-color:var(--navy)}
  .pane{display:none}
  .pane.act{display:block}

  /* ============ BENEFICIARIO ============ */
  .welcome{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:22px}
  .welcome .wname{font-size:17px;font-weight:700}
  .welcome .wsub{font-size:12.5px;color:#c9d2f2}
  .petcard{display:flex;gap:18px;align-items:flex-start}
  .petavatar{width:86px;height:86px;border-radius:50%;background:var(--navy-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .kv{font-size:13px}
  .kv b{display:inline-block;min-width:130px;color:var(--muted);font-weight:600}
  .timeline{list-style:none;margin-top:6px}
  .timeline li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line);margin-left:8px}
  .timeline li:last-child{padding-bottom:0}
  .timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--navy);border:2.5px solid var(--cream)}
  .timeline .tdate{font-size:11px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;font-weight:700}
  .timeline .ttitle{font-weight:700;color:var(--navy);font-size:14px;margin:2px 0}
  .timeline p{font-size:13px;color:var(--ink)}
  .days{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:14px 0}
  .day{border:1.5px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;background:#fff;transition:.12s}
  .day .dw{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .day .dn{font-size:19px;font-weight:800;color:var(--navy);margin:2px 0}
  .day .dx{font-size:10.5px;color:var(--muted)}
  .day:hover{border-color:var(--navy-3)}
  .day.sel{background:var(--navy);border-color:var(--navy)}
  .day.sel .dw,.day.sel .dn,.day.sel .dx{color:#fff}
  .day.off{opacity:.38;pointer-events:none;background:var(--cream-2)}
  .hours{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
  .hr{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--navy)}
  .hr:hover{border-color:var(--navy-3)}
  .hr.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
  .hr.off{opacity:.35;pointer-events:none;text-decoration:line-through}
  .benef{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
  .benef h4{color:var(--navy);font-size:14px;margin-bottom:4px}
  .benef .via{font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
  .bigdisc{font-size:24px;font-weight:800;color:var(--navy)}

  /* ============ ADMIN ============ */
  .admin-layout{display:grid;grid-template-columns:215px 1fr;gap:22px;align-items:start}
  .admin-layout>div{min-width:0} /* evita que tablas anchas revienten la columna (scrollean en su wrapper) */
  .sidenav{background:var(--navy);border-radius:var(--radius);padding:12px;position:sticky;top:74px}
  .sidenav button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:transparent;border:none;color:#c9cfe6;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:12.8px;font-weight:600;letter-spacing:.3px;margin-bottom:2px}
  .sidenav button:hover{background:rgba(255,255,255,.09);color:#fff}
  .sidenav button.act{background:#fff;color:var(--navy)}
  .navbadge{background:var(--bad);color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 7px;display:inline-block;line-height:1.5;flex:0 0 auto}
  /* grupo desplegable del sidenav (ej. "Agenda") */
  .sidenav .grp-items{margin-bottom:2px}
  .sidenav .subitem{padding-left:26px;font-size:12.3px}
  .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
  .kpi .kn{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}
  .kpi .kl{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:3px}
  .kpi .kd{font-size:11.5px;margin-top:6px;color:var(--ok);font-weight:600}
  .bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:16px}
  .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
  .bar .fill{width:100%;max-width:46px;background:var(--navy-2);border-radius:6px 6px 0 0;position:relative}
  .bar .fill.alt{background:#b9c3e6}
  .bar .bl{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.5px}
  .bar .bv{font-size:11px;font-weight:700;color:var(--navy)}
  .prog{background:var(--cream-2);border-radius:999px;height:10px;overflow:hidden;margin-top:6px}
  .prog i{display:block;height:100%;background:var(--navy-2);border-radius:999px}
  .cap{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--navy)}
  .cap .prog{flex:1;margin-top:0}
  .routehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .empcard h3{color:var(--navy);font-size:16px}
  .empcard .es{font-size:12px;color:var(--muted);margin-bottom:10px}
  .mini{font-size:12px;color:var(--muted)}

  /* ============ PLAN DE COSTOS ============ */
  .clist{list-style:none;margin-top:14px}
  .clist li{position:relative;padding:0 0 10px 26px;font-size:13.5px}
  .clist li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--ok);font-weight:800}
  .price{font-size:34px;font-weight:800;color:var(--navy);line-height:1.1;margin:10px 0 2px}
  .price small{font-size:14px;font-weight:600;color:var(--muted)}
  .pricetbl td:last-child{text-align:right;font-weight:800;color:var(--navy);white-space:nowrap}
  .comp h3{color:var(--navy);font-size:15.5px;margin:10px 0 4px}

  /* ============ MODAL ============ */
  .modal-back{position:fixed;inset:0;z-index:70;background:rgba(17,24,50,.55);display:flex;align-items:center;justify-content:center;padding:20px}
  .modal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;max-width:720px;width:100%;max-height:85vh;overflow:auto}

  /* ============ TOAST ============ */
  #toast{position:fixed;bottom:20px;right:20px;z-index:60;background:var(--navy);color:#fff;padding:13px 20px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;max-width:340px}
  #toast.show{opacity:1;transform:translateY(0)}

  @media(max-width:860px){
    .admin-layout{grid-template-columns:1fr}
    .sidenav{position:static;display:flex;flex-wrap:wrap;gap:4px}
    .sidenav button{width:auto}
    .sidenav .grp-items{display:flex;flex-wrap:wrap;gap:4px}
    .sidenav .subitem{padding-left:12px}
    .hero h1{font-size:36px}
    .kv b{min-width:110px}
  }

  /* ============ CTA DEL HERO ============ */
  .hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  /* ============ CTA FLOTANTE (burbuja) ============ */
  .fab-cta{
    display:none;position:fixed;z-index:55;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    align-items:center;gap:8px;
    background:#F5F0E9;color:var(--navy);
    border:1.5px solid var(--navy);border-radius:999px;
    padding:13px 22px;font-size:12.5px;font-weight:700;
    letter-spacing:.6px;text-transform:uppercase;cursor:pointer;
    box-shadow:0 10px 26px rgba(17,34,80,.32);
    transition:transform .12s,box-shadow .12s,background .12s;
  }
  .fab-cta:hover{background:#fff;box-shadow:0 12px 30px rgba(17,34,80,.4)}
  .fab-cta:active{transform:translateY(1px)}

  /* ============ MOBILE (≤760px) ============ */
  @media(max-width:760px){
    .topbar{gap:12px;padding:11px 16px}
    .brand{flex:1 1 auto;min-width:0}
    .brand .b1{font-size:18px}

    .hero{padding:52px 20px 46px}
    .hero h1{font-size:33px;letter-spacing:1px}
    .hero p{font-size:14.5px;margin:14px 0 22px}
    .hero .paw{width:230px;height:230px;right:-56px;bottom:-44px}
    .hero-cta .btn{width:100%;padding:13px 20px}

    .stripe{padding:36px 20px}
    h2.sec{font-size:20px}
    p.sub{font-size:13px}
    .wrap{padding:22px 18px 48px}
    .note{padding:12px 14px}

    #registro .stripe-in{gap:22px}
    #registro .card{padding:18px}

    .foot-in{flex-direction:column;align-items:flex-start;gap:12px}
    .foot-in>div:last-child{text-align:left !important}

    /* CTA flotante visible + espacio para que no tape el footer */
    .fab-cta{display:inline-flex}
    footer{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
    /* toast por encima del fab */
    #toast{left:16px;right:16px;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom))}
  }

  /* ============ PISO DE ACCESIBILIDAD ============ */
  :focus-visible{outline:2px solid var(--navy-3);outline-offset:2px;border-radius:4px}
  .topbar :focus-visible,.hero :focus-visible{outline-color:#fff}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }

/* ============ Modal genérico (cambio de contraseña · Bloque 1.6) ============ */
.modal-ov{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,20,45,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-card{
  background:#fff; border-radius:14px; padding:24px;
  width:100%; max-width:420px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
@media (max-width:520px){ .modal-card{ padding:18px } }

/* ============ Crédito de Arttmize (Bloque 5) ============ */
/* El pie queda SIEMPRE abajo del todo, aunque la vista tenga poco contenido
   (login, Reportes, etc.). El body pasa a flex column y la sección de
   contenido crece para llenar el hueco; así el pie conserva su margen de
   40px cuando la página es larga, en vez de perderlo con margin-top:auto.
   Las tres vistas tienen la misma estructura: topbar + section + pie. */
html{ height:100% }
body{ min-height:100vh; display:flex; flex-direction:column }
body > section{ flex:1 0 auto }
body > script{ display:none }

.arttmize-credito{
  background:var(--navy); color:#c9cfe6;
  padding:22px 28px; margin-top:40px;
}
/* Pegado al borde derecho de la barra, no a la columna de contenido:
   por eso NO lleva max-width. Es un crédito, no contenido de la página. */
.arttmize-credito .ac-in{
  display:flex; align-items:center; justify-content:flex-end;
  gap:14px; flex-wrap:wrap;
}
.arttmize-credito a{
  display:inline-flex; align-items:center; gap:16px;
  color:#fff; text-decoration:none; max-width:100%;
}
.arttmize-credito img{
  height:58px; width:auto; display:block;
  background:#fff; border-radius:12px; padding:7px 13px;
}
.arttmize-credito .ac-txt{ font-size:16px; letter-spacing:.2px }
.arttmize-credito .ac-txt b{ color:#fff }
@media (max-width:520px){
  .arttmize-credito{ padding:20px 16px }
  .arttmize-credito .ac-in{ justify-content:center }
  .arttmize-credito a{ flex-direction:column; gap:10px; text-align:center }
  .arttmize-credito img{ height:46px }
}