/* ==========================================================
   TEMA "PIZARRA" — panel de los clientes de DataFlow
   Se activa con <html data-tema="cliente"> (js/panel.js) en las
   instalaciones sin el módulo "sitio". El panel de DataFlow no lo usa.

   Idea: la pizarra del taller. Fondo blanco, marco de aluminio (menú),
   tinta de marcador para los estados y el color de la marca del
   cliente solo en acciones y en los "imanes" de las tarjetas.
   Las variables se sobreescriben aquí; admin.css ya las usa.
   ========================================================== */

:root[data-tema="cliente"]{
  /* Superficies */
  --bg:#F3F4F5;            /* pizarra */
  --bg2:#FFFFFF;           /* tarjetas */
  --bg3:#E9ECEE;
  --panel:#FFFFFF;
  --nav:#E6E9EC;           /* marco de aluminio */
  --marco:#D3D8DD;

  /* Tinta */
  --ink:#14181C;
  --muted:#454E57;
  --faint:#626B74;
  --label:#2A3037;
  --line:rgba(20,24,28,.13);

  /* Capas que en el tema oscuro eran blancas o azul profundo */
  --rgb-capa:20,24,28;
  --rgb-hondo:255,255,255;
  --rgb-linea:20,24,28;
  --rgb-muted:69,78,87;

  /* Acento por defecto (si el cliente no eligió color): azul acero */
  --blue:#2F5E8C;--blue-d:#1F4466;--cyan:#24496D;
  --glow:transparent;--glow-b:transparent;

  /* Marcadores de estado, legibles sobre blanco */
  --green:#18794E;--yellow:#A15C07;--red:#C62828;--orange:#C2410C;

  --font-d:'Barlow Condensed','Arial Narrow',ui-sans-serif,sans-serif;
  --font-b:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --sombra:0 1px 2px rgba(20,24,28,.06),0 2px 6px rgba(20,24,28,.05);
  --sombra-alta:0 10px 24px -6px rgba(20,24,28,.22),0 2px 6px rgba(20,24,28,.08);
  color-scheme:light;
}

/* ---------- Base ---------- */
[data-tema="cliente"] body{font-size:15.5px;font-variant-numeric:tabular-nums}
[data-tema="cliente"] h1,[data-tema="cliente"] h2,[data-tema="cliente"] h3{letter-spacing:-.005em;font-weight:700}
[data-tema="cliente"] ::selection{background:color-mix(in srgb,var(--blue) 22%,white);color:var(--ink)}
[data-tema="cliente"] :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[data-tema="cliente"] *{scrollbar-color:#B9C0C7 transparent}
[data-tema="cliente"] .aura{display:none}

/* ---------- Inicio de sesión ---------- */
[data-tema="cliente"] #login-page{background:var(--bg)}
[data-tema="cliente"] .login-bg-effects,
[data-tema="cliente"] .login-grid-matrix,
[data-tema="cliente"] .glow-orb{display:none}
[data-tema="cliente"] .login-box{background:#fff;border:1px solid var(--marco);box-shadow:var(--sombra-alta);backdrop-filter:none;border-radius:14px}
[data-tema="cliente"] .login-box::before{display:none}
[data-tema="cliente"] .login-logo .wm{color:var(--ink);font-size:1.45rem;line-height:1.1}
[data-tema="cliente"] .login-logo .admin-chip{color:var(--faint);background:none;border:0;padding:0;letter-spacing:.06em}
[data-tema="cliente"] .login-box h1{font-size:1.9rem;color:var(--ink)}
[data-tema="cliente"] .login-box .login-subtitle{color:var(--muted)}
[data-tema="cliente"] .field label{color:var(--label)}
[data-tema="cliente"] .input-wrap input{background:#fff;border:1px solid #BFC6CD;color:var(--ink);box-shadow:none}
[data-tema="cliente"] .input-wrap input::placeholder{color:#7A838B}
[data-tema="cliente"] .input-wrap input:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
[data-tema="cliente"] .input-wrap .input-icon{color:var(--faint)}
[data-tema="cliente"] .remember-wrap{color:var(--muted)}
[data-tema="cliente"] .remember-wrap input[type="checkbox"]{accent-color:var(--blue)}
[data-tema="cliente"] .btn-login,
[data-tema="cliente"] .btn-login:hover{background:var(--blue);border:0;box-shadow:0 2px 0 var(--blue-d);border-radius:10px;font-size:1.05rem;letter-spacing:.01em}
[data-tema="cliente"] .btn-login:hover{background:var(--blue-d);transform:none}
[data-tema="cliente"] .login-security-tag{color:var(--faint)}
[data-tema="cliente"] .err{color:var(--red)}

/* ---------- Botones ---------- */
[data-tema="cliente"] .btn-p{background:var(--blue);border:1px solid var(--blue-d);color:#fff;box-shadow:0 1px 0 var(--blue-d)}
[data-tema="cliente"] .btn-p:hover{background:var(--blue-d);box-shadow:0 1px 0 var(--blue-d);transform:none}
[data-tema="cliente"] .btn-g{background:#fff;border:1px solid #C3CAD1;color:var(--ink)}
[data-tema="cliente"] .btn-g:hover{border-color:var(--ink);background:#fff}
[data-tema="cliente"] .btn-r{background:#fff;color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,white)}
[data-tema="cliente"] .btn-wa{background:#1E8F4E;border-color:#17703D;color:#fff}
[data-tema="cliente"] .btn-icon-act{background:#fff;border-color:#C9CFD5;color:var(--muted)}
[data-tema="cliente"] .btn-icon-act:hover{color:var(--blue-d);border-color:var(--blue);background:#fff}
[data-tema="cliente"] .btn-icon-act.wa{color:#1E8F4E}
[data-tema="cliente"] .btn-icon-act.wa:hover{color:#fff;background:#1E8F4E;border-color:#1E8F4E}

/* ---------- Menú: marco de aluminio ---------- */
[data-tema="cliente"] .sidebar{background:var(--nav);border-right:1px solid var(--marco);backdrop-filter:none;box-shadow:none}
[data-tema="cliente"] .sb-logo{border-bottom:1px solid var(--marco);background:#EEF0F2}
[data-tema="cliente"] .sb-logo .wm{color:var(--ink);font-size:1.12rem}
[data-tema="cliente"] .sb-logo small{color:var(--faint);letter-spacing:.08em}
[data-tema="cliente"] .sb-group{color:#5C656E;letter-spacing:.08em}
[data-tema="cliente"] .sb-nav a{color:#2F363D;border:1px solid transparent;font-weight:500}
[data-tema="cliente"] .sb-nav a svg{color:#5C656E}
[data-tema="cliente"] .sb-nav a:hover{background:rgba(255,255,255,.65);color:var(--ink)}
[data-tema="cliente"] .sb-nav a.active{background:#fff;color:var(--ink);font-weight:700;border-color:var(--marco);box-shadow:var(--sombra)}
[data-tema="cliente"] .sb-nav a.active svg{color:var(--blue)}
[data-tema="cliente"] .sb-footer{border-top:1px solid var(--marco)}
[data-tema="cliente"] .sb-user .av{background:var(--blue);color:#fff}
[data-tema="cliente"] .ham span{background:var(--ink)}
[data-tema="cliente"] .ham{background:#fff;border:1px solid var(--marco)}

/* ---------- Encabezados de pantalla ---------- */
[data-tema="cliente"] .dash-welcome h2,
[data-tema="cliente"] .mod-title h2,
[data-tema="cliente"] .top-bar h2{font-size:2.1rem;line-height:1.05;color:var(--ink)}
[data-tema="cliente"] .dash-welcome p,[data-tema="cliente"] .mod-title p{color:var(--muted)}
/* Bandeja de marcadores: una línea del color de la marca bajo el título */
[data-tema="cliente"] .dash-header-wrap,
[data-tema="cliente"] .mod-head{border-bottom:3px solid var(--blue);padding-bottom:1rem;margin-bottom:1.6rem}
[data-tema="cliente"] #dash-date{color:var(--blue-d) !important}
[data-tema="cliente"] .sec-label{color:#4B545D;letter-spacing:.07em;font-family:var(--font-d);font-size:.86rem}
[data-tema="cliente"] .mod-ico{background:color-mix(in srgb,var(--blue) 12%,white);color:var(--blue-d);border:1px solid color-mix(in srgb,var(--blue) 25%,white)}

/* ---------- Tarjetas y paneles ---------- */
[data-tema="cliente"] .stat-card,
[data-tema="cliente"] .panel-card,
[data-tema="cliente"] .config-group,
[data-tema="cliente"] .table-wrap,
[data-tema="cliente"] .callout{background:#fff;border:1px solid var(--line);box-shadow:var(--sombra);backdrop-filter:none}
[data-tema="cliente"] .stat-card{border-radius:12px}
[data-tema="cliente"] .stat-card:hover{border-color:#AEB6BE;box-shadow:var(--sombra);transform:none}
[data-tema="cliente"] .stat-label{color:var(--muted);letter-spacing:.04em}
[data-tema="cliente"] .stat-val{font-family:var(--font-d);font-size:2.6rem;font-weight:700;color:var(--ink)}
[data-tema="cliente"] .stat-icon-wrap{background:var(--bg3) !important;color:var(--muted) !important}
[data-tema="cliente"] .stat-sub{color:var(--muted)}
[data-tema="cliente"] .panel-card{border-radius:14px}
[data-tema="cliente"] .panel-head h3{font-size:1.25rem;color:var(--ink)}
[data-tema="cliente"] .panel-head h3 svg{color:var(--blue)}
[data-tema="cliente"] .config-group h3{color:var(--ink);font-family:var(--font-d);font-size:1.2rem}
[data-tema="cliente"] .callout .ci{background:var(--blue);color:#fff}

/* Lo de hoy primero: el embudo y "a quién escribirle" suben sobre las cifras */
[data-tema="cliente"] #sec-dashboard.active{display:flex !important;flex-direction:column}
[data-tema="cliente"] #sec-dashboard .dash-header-wrap{order:-3}
[data-tema="cliente"] #sec-dashboard .dash-banner{order:-2}
[data-tema="cliente"] #sec-dashboard .dash-split[data-modulo="clientes"]{order:-1}

/* Agenda y listas */
[data-tema="cliente"] .agenda-item{background:#fff;border:1px solid var(--line)}
[data-tema="cliente"] .agenda-item:hover{background:#FAFAFA;border-color:#AEB6BE}
[data-tema="cliente"] .agenda-date{background:var(--bg3);color:var(--ink);border:1px solid var(--line)}
[data-tema="cliente"] .agenda-info strong{color:var(--ink)}
[data-tema="cliente"] .agenda-info small{color:var(--muted)}
[data-tema="cliente"] .vencido{color:var(--red) !important;font-weight:600}
[data-tema="cliente"] .embudo-total b{color:var(--green);font-family:var(--font-d);font-size:1.9rem}
[data-tema="cliente"] .embudo-barra{background:var(--bg3)}
[data-tema="cliente"] .quick-link-btn{background:#fff;border:1px solid var(--line);color:var(--ink)}
[data-tema="cliente"] .quick-link-btn:hover{border-color:var(--blue);box-shadow:var(--sombra)}
[data-tema="cliente"] .quick-link-btn svg{color:var(--blue)}

/* Etiquetas de estado: tinta de marcador sobre blanco */
[data-tema="cliente"] .badge{font-weight:700;border-radius:6px}
[data-tema="cliente"] .badge.c-gris{background:#EEF0F2;color:#3D454D;border:1px solid #CDD3D8}
[data-tema="cliente"] .badge.c-azul,[data-tema="cliente"] .badge.revision{background:#E8F0FB;color:#1F4E8C;border:1px solid #B9CDEB}
[data-tema="cliente"] .badge.c-cian{background:#E3F4F6;color:#0E6470;border:1px solid #AED9DF}
[data-tema="cliente"] .badge.c-verde,[data-tema="cliente"] .badge.respondido{background:#E6F4EC;color:#17663F;border:1px solid #A9D7BD}
[data-tema="cliente"] .badge.c-amarillo,[data-tema="cliente"] .badge.pendiente{background:#FDF3DC;color:#86500A;border:1px solid #EDCF8E}
[data-tema="cliente"] .badge.c-naranja{background:#FDEBDD;color:#9A3C0B;border:1px solid #F2C29C}
[data-tema="cliente"] .badge.c-rojo{background:#FBE7E7;color:#A41E1E;border:1px solid #EFB3B3}
[data-tema="cliente"] .badge.c-morado{background:#F0EAF9;color:#5B3191;border:1px solid #D2C1EA}

/* ---------- Tablas ---------- */
[data-tema="cliente"] thead th{background:#F2F4F5;color:#3D454D;border-bottom:1px solid var(--marco);letter-spacing:.04em}
[data-tema="cliente"] tbody tr{border-bottom:1px solid var(--line)}
[data-tema="cliente"] tbody tr:hover{background:#FAFAF9}
[data-tema="cliente"] .search-wrap input,[data-tema="cliente"] select.filter{background:#fff;border:1px solid #C3CAD1;color:var(--ink)}
[data-tema="cliente"] .search-wrap input:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
[data-tema="cliente"] .seg{background:var(--bg3);border:1px solid var(--marco)}
[data-tema="cliente"] .seg button{color:var(--muted)}
[data-tema="cliente"] .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sombra)}

/* ---------- Tablero: la pizarra con imanes ---------- */
[data-tema="cliente"] .col{background:#FBFBFA;border:1px solid var(--marco);border-radius:12px}
[data-tema="cliente"] .col.over{background:color-mix(in srgb,var(--blue) 6%,white);border-color:var(--blue)}
/* Cada columna subrayada con el marcador de su estado */
[data-tema="cliente"] .col-head{border-bottom:3px solid var(--marcador,#8A939B);margin:0 .7rem .5rem;padding:.9rem .3rem .55rem}
[data-tema="cliente"] .col.col-c-gris{--marcador:#8A939B}
[data-tema="cliente"] .col.col-c-azul{--marcador:#2F6FBF}
[data-tema="cliente"] .col.col-c-cian{--marcador:#1A8C99}
[data-tema="cliente"] .col.col-c-verde{--marcador:#1F8A52}
[data-tema="cliente"] .col.col-c-amarillo{--marcador:#D99A1C}
[data-tema="cliente"] .col.col-c-naranja{--marcador:#E0661C}
[data-tema="cliente"] .col.col-c-rojo{--marcador:#D33A3A}
[data-tema="cliente"] .col.col-c-morado{--marcador:#7B4FC2}
[data-tema="cliente"] .col-head .n{color:var(--muted);font-family:var(--font-d);font-size:.95rem}
[data-tema="cliente"] .col-suma{color:#17663F;background:#E6F4EC}
[data-tema="cliente"] .col-add{border:1px dashed #B9C0C7;color:var(--muted);background:none}
[data-tema="cliente"] .col-add:hover{border-color:var(--blue);color:var(--blue-d);background:#fff}
/* Las tarjetas son imanes: punto del color de la marca arriba y sombra al levantarlas */
[data-tema="cliente"] .k-card{position:relative;background:#fff;border:1px solid #D5DADF;border-radius:10px;box-shadow:var(--sombra);padding-top:1.15rem}
[data-tema="cliente"] .k-card::before{content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--blue) 55%,white),var(--blue) 60%,var(--blue-d));
  box-shadow:0 2px 3px rgba(20,24,28,.3)}
[data-tema="cliente"] .k-card:hover{border-color:#AEB6BE;transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(20,24,28,.2)}
[data-tema="cliente"] .k-card.dragging{transform:rotate(-1.5deg) scale(1.02);box-shadow:var(--sombra-alta)}
[data-tema="cliente"] .k-card strong{color:var(--ink);font-size:1rem}
[data-tema="cliente"] .k-card .k-sub{color:var(--muted)}
[data-tema="cliente"] .k-meta{color:var(--muted)}
[data-tema="cliente"] .k-meta .chip{background:var(--bg3);color:#2F363D}

/* ---------- Inicio ---------- */
/* Sin la ilustración tecnológica: logo y nombre del negocio, directo */
[data-tema="cliente"] .hero{display:none}
[data-tema="cliente"] .hero-wrap{margin-bottom:1rem}
[data-tema="cliente"] .hero-logo{position:static;width:72px;height:72px;border-radius:14px;background:#fff;border:1px solid var(--marco);box-shadow:var(--sombra)}
[data-tema="cliente"] .home-title{color:var(--ink);font-size:2.6rem;letter-spacing:-.01em}
[data-tema="cliente"] .home-sub{color:var(--muted);padding-bottom:1rem;border-bottom:3px solid var(--blue);margin-bottom:1.4rem}
[data-tema="cliente"] .home-head h3{font-family:var(--font-d);font-size:1.35rem}
/* Accesos de Inicio: una tarjeta por sección con su ícono, su nombre completo y su número */
[data-tema="cliente"] .gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
[data-tema="cliente"] .g-cover-wrap,[data-tema="cliente"] .g-tools{display:none}
[data-tema="cliente"] .g-card{border-radius:12px;background:#fff;box-shadow:var(--sombra);border:1px solid var(--line)}
[data-tema="cliente"] .g-card:hover{border-color:var(--blue);transform:none;box-shadow:var(--sombra)}
[data-tema="cliente"] .g-body{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;row-gap:.1rem;align-items:center;background:#fff;padding:1.05rem 1.1rem}
[data-tema="cliente"] .g-body svg{grid-row:span 2;width:22px;height:22px;color:var(--blue);padding:9px;box-sizing:content-box;border-radius:10px;
  background:color-mix(in srgb,var(--blue) 10%,white)}
[data-tema="cliente"] .g-body strong{font-family:var(--font-d);font-size:1.18rem;color:var(--ink);white-space:normal}
[data-tema="cliente"] .g-count{color:var(--muted);font-size:.85rem}

/* ---------- Formularios y ventanas ---------- */
[data-tema="cliente"] .overlay{background:rgba(20,24,28,.38);backdrop-filter:none}
[data-tema="cliente"] .modal{background:#fff;border:1px solid var(--marco);box-shadow:var(--sombra-alta)}
[data-tema="cliente"] .reg-top{border-bottom:1px solid var(--line)}
[data-tema="cliente"] .reg-foot{border-top:1px solid var(--line);background:#FAFAFA}
[data-tema="cliente"] .field>input,[data-tema="cliente"] .field>select,[data-tema="cliente"] .serv-pick>select,[data-tema="cliente"] .field>textarea,
[data-tema="cliente"] .marca-color>input[type=text]{background:#fff;border:1px solid #BFC6CD;color:var(--ink)}
[data-tema="cliente"] .field>input:focus,[data-tema="cliente"] .field>select:focus,[data-tema="cliente"] .serv-pick>select:focus,[data-tema="cliente"] .field>textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
[data-tema="cliente"] .field select option{background:#fff;color:var(--ink)}
[data-tema="cliente"] .rel-item{background:#fff;border:1px solid var(--line)}
[data-tema="cliente"] .toast{background:var(--ink);color:#fff;border:0}
[data-tema="cliente"] .link-cyan{color:var(--blue-d)}
[data-tema="cliente"] .marca-vista{background:#fff}

/* ---------- Celular: "+ Nuevo" fijo al alcance del pulgar ---------- */
@media (max-width:800px){
  [data-tema="cliente"] .panel-card{padding:1.1rem;min-width:0}
  [data-tema="cliente"] .dash-split{grid-template-columns:minmax(0,1fr)}
  [data-tema="cliente"] .panel-head{flex-wrap:wrap;gap:.5rem}
  [data-tema="cliente"] .agenda-item{flex-wrap:wrap;padding:.75rem .8rem;gap:.6rem .8rem}
  [data-tema="cliente"] .agenda-info{flex:1 1 160px;min-width:0}
  [data-tema="cliente"] .embudo-fila{grid-template-columns:7.2rem minmax(0,1fr) 1.4rem 4.2rem;gap:.45rem}
  [data-tema="cliente"] .mod-acts .btn-p{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
    padding:.95rem 1.3rem;border-radius:999px;font-size:1rem;box-shadow:0 8px 20px -6px rgba(20,24,28,.45)}
  [data-tema="cliente"] .dash-welcome h2,[data-tema="cliente"] .mod-title h2{font-size:1.75rem}
  [data-tema="cliente"] .home-title{font-size:2rem}
}

/* ---------- Inicio de sesión en dos lados: la marca del negocio y el formulario ---------- */
.login-marca{display:none}
[data-tema="cliente"] #login-page{grid-template-columns:minmax(380px,42%) 1fr;place-items:stretch;padding:0;background:#fff}
[data-tema="cliente"] .login-marca{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:clamp(32px,4vw,56px);background:var(--blue);color:#fff;min-height:100%}
[data-tema="cliente"] .lm-logo{width:88px;height:88px;border-radius:20px;background:#fff;display:grid;place-items:center}
[data-tema="cliente"] .lm-logo .marca-logo{border-radius:0}
[data-tema="cliente"] .lm-nombre{font:600 clamp(44px,4.4vw,72px)/1 'Barlow Condensed',sans-serif;letter-spacing:-.01em;margin:0 0 .9rem}
[data-tema="cliente"] .lm-eslogan{font-size:1.15rem;margin:0;color:rgba(255,255,255,.9)}
[data-tema="cliente"] .lm-eslogan:empty{display:none}
[data-tema="cliente"] .lm-fecha{margin:1.6rem 0 0;font-size:1rem;color:rgba(255,255,255,.85)}
[data-tema="cliente"] .lm-fecha::first-letter{text-transform:uppercase}
[data-tema="cliente"] .lm-pie{margin:0;font-size:.85rem;color:rgba(255,255,255,.8)}
[data-tema="cliente"] .login-card-wrapper{align-self:center;justify-self:center;width:min(420px,100% - 32px);padding:40px 0}
[data-tema="cliente"] .login-box{border:0;box-shadow:none;padding:0;background:none}
[data-tema="cliente"] .login-logo{display:none}
[data-tema="cliente"] .login-box h1{font-size:2.2rem}
[data-tema="cliente"] .login-security-tag{text-align:left}
@media(max-width:800px){
  [data-tema="cliente"] #login-page{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}
  [data-tema="cliente"] .login-marca{flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:20px 16px;min-height:0}
  [data-tema="cliente"] .lm-logo{width:56px;height:56px;border-radius:14px;flex:none}
  [data-tema="cliente"] .lm-nombre{font-size:1.9rem;margin:0}
  [data-tema="cliente"] .lm-eslogan{font-size:.95rem}
  [data-tema="cliente"] .lm-fecha,[data-tema="cliente"] .lm-pie{display:none}
  [data-tema="cliente"] .login-card-wrapper{align-self:start;padding:32px 0}
}

/* ==========================================================
   PIEL DE MARCA — el panel se viste con el color del negocio
   Todo sale de --blue (el color que el cliente eligió):
   menú en su tono más hondo, fondo teñido con él (no blanco),
   tarjetas planas con borde del mismo tinte y la cifra principal
   del día sobre su color. Sirve igual para un spa vino o una
   ferretería naranja.
   ========================================================== */
:root[data-tema="cliente"]{
  --hondo:color-mix(in srgb,var(--blue) 19%,#101216);           /* menú */
  --hondo:oklch(from var(--blue) .22 min(calc(c * .35),.045) h);  /* misma intensidad para cualquier color */
  --hondo-2:color-mix(in srgb,var(--blue) 38%,#15161A);
  --bg:color-mix(in srgb,var(--blue) 7%,#F4F1EE);                /* suelo teñido */
  --bg2:color-mix(in srgb,var(--blue) 2%,#FFFDFB);               /* tarjetas */
  --panel:var(--bg2);
  --bg3:color-mix(in srgb,var(--blue) 9%,#EFEBE7);
  --marco:color-mix(in srgb,var(--blue) 16%,#DCD6D0);
  --line:color-mix(in srgb,var(--blue) 12%,#E3DDD7);
  --tinte:color-mix(in srgb,var(--blue) 12%,#FFFDFB);            /* realce suave */
  --sombra:none;
}
[data-tema="cliente"] body{background:var(--bg)}

/* ---------- Menú en el tono hondo de la marca ---------- */
[data-tema="cliente"] .sidebar{background:var(--hondo);border-right:0;color:#fff}
[data-tema="cliente"] .sb-logo{background:transparent;border-bottom:1px solid rgba(255,255,255,.09)}
[data-tema="cliente"] .sb-logo .wm{color:#fff}
[data-tema="cliente"] .sb-logo small{color:rgba(255,255,255,.62)}
[data-tema="cliente"] .sb-logo .marca-logo{background:#fff;padding:3px;border-radius:10px;box-sizing:border-box}
[data-tema="cliente"] .sb-group{color:rgba(255,255,255,.5);letter-spacing:.06em}
[data-tema="cliente"] .sb-nav a{color:rgba(255,255,255,.8);border:0}
[data-tema="cliente"] .sb-nav a svg{color:rgba(255,255,255,.5)}
[data-tema="cliente"] .sb-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
[data-tema="cliente"] .sb-nav a.active{background:rgba(255,255,255,.11);color:#fff;font-weight:600;box-shadow:none}
[data-tema="cliente"] .sb-nav a.active svg{color:color-mix(in srgb,var(--blue) 40%,white)}
[data-tema="cliente"] .sb-footer{border-top:1px solid rgba(255,255,255,.09)}
[data-tema="cliente"] .sb-user strong{color:#fff}
[data-tema="cliente"] .sb-user small{color:rgba(255,255,255,.6)}
[data-tema="cliente"] .sb-user .av{background:#fff;color:var(--hondo)}
[data-tema="cliente"] .sidebar .logout-btn{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff}
[data-tema="cliente"] .sidebar .logout-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
[data-tema="cliente"] .sidebar *{scrollbar-color:rgba(255,255,255,.25) transparent}

/* ---------- Superficies: planas, con el borde del tinte de la marca ---------- */
[data-tema="cliente"] .stat-card,
[data-tema="cliente"] .panel-card,
[data-tema="cliente"] .config-group,
[data-tema="cliente"] .table-wrap,
[data-tema="cliente"] .callout,
[data-tema="cliente"] .g-card,
[data-tema="cliente"] .ag-kpis{background:var(--bg2);border:1px solid var(--line);box-shadow:none}
[data-tema="cliente"] .stat-card:hover,[data-tema="cliente"] .g-card:hover{border-color:var(--blue);box-shadow:none}
[data-tema="cliente"] .g-body{background:transparent}
[data-tema="cliente"] .agenda-item,[data-tema="cliente"] .rel-item,[data-tema="cliente"] .quick-link-btn{background:var(--bg2);border-color:var(--line)}
[data-tema="cliente"] .agenda-item:hover{background:var(--tinte)}
[data-tema="cliente"] .agenda-date{background:var(--tinte);border-color:var(--line)}
[data-tema="cliente"] .hero-logo{background:#fff;border-color:var(--line);box-shadow:none}

/* La cifra que manda en el día va sobre el color de la marca */
[data-tema="cliente"] .ag-kpis{overflow:hidden}
[data-tema="cliente"] .ag-kpi.lider{background:var(--blue);color:#fff}
[data-tema="cliente"] .ag-kpi.lider span,[data-tema="cliente"] .ag-kpi.lider span small{color:rgba(255,255,255,.85)}
[data-tema="cliente"] .ag-kpi.lider b{color:#fff}
[data-tema="cliente"] .ag-kpi.lider+.ag-kpi{border-left-color:transparent}

/* Encabezado de cada pantalla: título con su marca de color a la izquierda */
[data-tema="cliente"] .dash-header-wrap,
[data-tema="cliente"] .mod-head{border-bottom:1px solid var(--marco)}
[data-tema="cliente"] .dash-welcome h2,[data-tema="cliente"] .mod-title h2,[data-tema="cliente"] .home-title{color:var(--hondo)}
[data-tema="cliente"] .home-sub{border-bottom:1px solid var(--marco)}
[data-tema="cliente"] .mod-ico{background:var(--tinte);border-color:var(--line)}

/* Tablas: sin banda gris en la cabecera, filas sobre el tinte */
[data-tema="cliente"] thead th{background:transparent;color:var(--muted);border-bottom:1px solid var(--marco)}
[data-tema="cliente"] tbody tr:hover{background:var(--tinte)}
[data-tema="cliente"] .search-wrap input,[data-tema="cliente"] select.filter{background:var(--bg2);border-color:var(--marco)}
[data-tema="cliente"] .seg{background:var(--bg3);border-color:var(--line)}
[data-tema="cliente"] .seg button.on{background:var(--bg2);box-shadow:none;border:1px solid var(--line)}
[data-tema="cliente"] .btn-g,[data-tema="cliente"] .btn-icon-act{background:var(--bg2);border-color:var(--marco)}
[data-tema="cliente"] .col{background:color-mix(in srgb,var(--blue) 4%,#FAF8F6);border-color:var(--line)}
[data-tema="cliente"] .k-card{background:var(--bg2);border-color:var(--line);box-shadow:none}
[data-tema="cliente"] .modal{background:var(--bg2)}
[data-tema="cliente"] .reg-foot{background:var(--tinte)}

/* ---------- Login: una tarjeta al centro sobre el color de la marca ----------
   Izquierda: ilustración con formas de la marca (index.html, .lm-arte) y el saludo.
   Derecha: el formulario con campos redondeados. */
[data-tema="cliente"]{
  --lm-claro:color-mix(in srgb,var(--blue) 32%,white);
  --lm-acento:oklch(from var(--blue) max(l,.74) calc(c * .7) calc(h + 10));   /* el mismo color, más claro */
  --lm-fondo:color-mix(in srgb,var(--blue) 26%,white);
}
[data-tema="cliente"] #login-page{background:var(--lm-fondo);overflow:hidden auto;
  grid-template-columns:minmax(0,560px) minmax(0,440px);justify-content:center;align-content:center;place-items:stretch;padding:32px}
/* Manchas grandes en el fondo, como en la tarjeta pero más suaves */
[data-tema="cliente"] #login-page::before,
[data-tema="cliente"] #login-page::after{content:"";position:fixed;z-index:0;pointer-events:none;background:color-mix(in srgb,var(--blue) 40%,white)}
[data-tema="cliente"] #login-page::before{width:58vw;height:70vh;left:-14vw;top:-26vh;border-radius:42% 58% 63% 37% / 46% 41% 59% 54%}
[data-tema="cliente"] #login-page::after{width:46vw;height:62vh;right:-12vw;bottom:-24vh;border-radius:61% 39% 44% 56% / 52% 60% 40% 48%}
[data-tema="cliente"] .login-marca{position:relative;z-index:1;overflow:hidden;isolation:isolate;min-height:580px;
  background:#fff;color:var(--ink);border-radius:24px 0 0 24px;justify-content:space-between;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--blue) 45%,black)}
[data-tema="cliente"] .login-marca::before,[data-tema="cliente"] .login-marca::after{display:none}
[data-tema="cliente"] .lm-arte{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.lm-arte .a-claro{fill:var(--lm-claro)}
.lm-arte .a-acento{fill:var(--lm-acento)}
.lm-arte .a-marca{fill:var(--blue)}
.lm-arte .a-hondo{fill:var(--hondo,#222)}
.lm-arte .a-linea{fill:none;stroke:var(--hondo,#222);stroke-width:1.3;opacity:.75}
.lm-arte .a-arco{fill:none;stroke:var(--blue);stroke-width:8}
.lm-arte .a-arco-h{stroke:var(--hondo,#222)}
.lm-arte .a-trazo{fill:none;stroke:var(--hondo,#222);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-tema="cliente"] .lm-logo{width:76px;height:76px;border-radius:18px;background:#fff;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--blue) 60%,black)}
[data-tema="cliente"] .login-marca{justify-content:flex-start}
[data-tema="cliente"] .lm-cuerpo{max-width:320px;margin:auto 0;padding-bottom:90px}
[data-tema="cliente"] .lm-hola{font:700 clamp(36px,3.4vw,48px)/1.05 var(--font-d);margin:0 0 .6rem;color:var(--hondo)}
[data-tema="cliente"] .lm-nombre{font:600 1.25rem/1.25 var(--font-b);letter-spacing:0;margin:0 0 .35rem;color:var(--ink)}
[data-tema="cliente"] .lm-eslogan{font-size:1rem;color:var(--muted)}
[data-tema="cliente"] .lm-fecha{display:none}
[data-tema="cliente"] .lm-pie{display:none}   /* el formulario ya dice "Hecho por DataFlow Ec" */
[data-tema="cliente"] .login-card-wrapper{position:relative;z-index:1;align-self:stretch;justify-self:stretch;width:auto;max-width:none;
  display:grid;align-content:center;background:#fff;border:0;border-left:1px solid var(--line);border-radius:0 24px 24px 0;padding:48px 44px;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--blue) 45%,black)}
[data-tema="cliente"] .login-box h1{font-size:2.3rem;color:var(--hondo)}
[data-tema="cliente"] .input-wrap input{border-radius:999px;background:#fff;border-color:var(--marco);padding-left:2.9rem}
[data-tema="cliente"] .input-wrap .input-icon{left:1.1rem}
[data-tema="cliente"] .btn-login,[data-tema="cliente"] .btn-login:hover{border-radius:999px;box-shadow:none}
@media(max-width:900px){
  [data-tema="cliente"] #login-page{grid-template-columns:minmax(0,520px);grid-template-rows:auto auto;align-content:start;padding:16px}
  [data-tema="cliente"] .login-marca{min-height:230px;border-radius:22px 22px 0 0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1rem;padding:22px}
  [data-tema="cliente"] .lm-logo{width:56px;height:56px;border-radius:14px}
  [data-tema="cliente"] .lm-cuerpo{margin:0;max-width:62%}
  [data-tema="cliente"] .lm-hola{font-size:30px;margin-bottom:.3rem}
  [data-tema="cliente"] .lm-nombre{font-size:1.05rem}
  [data-tema="cliente"] .lm-eslogan,[data-tema="cliente"] .lm-pie{display:none}
  [data-tema="cliente"] .login-card-wrapper{border-left:0;border-top:1px solid var(--line);border-radius:0 0 22px 22px;padding:28px 22px;margin:0}
}

/* ---------- Login con foto del negocio (Configuración → Foto del inicio de sesión) ----------
   Más sobrio: fondo liso en el tono hondo de la marca, la foto llena el lado izquierdo
   con un velo oscuro para que el texto se lea, y el logo grande sin placa. */
[data-tema="cliente"].login-foto #login-page{background:color-mix(in srgb,var(--hondo) 35%,#121417)}
[data-tema="cliente"].login-foto #login-page::before,
[data-tema="cliente"].login-foto #login-page::after{display:none}
[data-tema="cliente"].login-foto .lm-arte{display:none}
[data-tema="cliente"].login-foto .login-marca{background:#111 var(--lm-foto) center/cover no-repeat;color:#fff;border-radius:16px 0 0 16px;box-shadow:none}
[data-tema="cliente"].login-foto .login-marca::before{display:block;content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;border-radius:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--hondo) 92%,transparent) 0%,color-mix(in srgb,var(--hondo) 55%,transparent) 50%,color-mix(in srgb,var(--hondo) 25%,transparent) 100%)}
[data-tema="cliente"].login-foto .lm-logo{align-self:flex-start;width:auto;height:auto;background:none;box-shadow:none;border-radius:0}
[data-tema="cliente"].login-foto .lm-logo .marca-logo{width:112px !important;height:auto !important;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
[data-tema="cliente"].login-foto .lm-cuerpo{margin:auto 0 0;padding:0;max-width:420px}
[data-tema="cliente"].login-foto .lm-hola{color:#fff}
[data-tema="cliente"].login-foto .lm-hola::after{content:"";display:block;width:56px;height:4px;background:var(--blue);margin-top:.9rem}
[data-tema="cliente"].login-foto .lm-nombre{color:#fff}
[data-tema="cliente"].login-foto .lm-eslogan{color:rgba(255,255,255,.82)}
[data-tema="cliente"].login-foto .login-card-wrapper{border-radius:0 16px 16px 0;border-left:0;box-shadow:none}
[data-tema="cliente"].login-foto .input-wrap input{border-radius:10px}
[data-tema="cliente"].login-foto .btn-login,[data-tema="cliente"].login-foto .btn-login:hover{border-radius:10px}
@media(max-width:900px){
  [data-tema="cliente"].login-foto .login-marca{border-radius:16px 16px 0 0;min-height:260px;justify-content:space-between}
  [data-tema="cliente"].login-foto .lm-logo .marca-logo{width:72px !important}
  [data-tema="cliente"].login-foto .lm-cuerpo{max-width:100%}
  [data-tema="cliente"].login-foto .lm-hola::after{display:none}
  [data-tema="cliente"].login-foto .login-card-wrapper{border-radius:0 0 16px 16px}
}

/* Login con foto, versión acero: corte en diagonal entre la foto y el formulario,
   un filo del color de la marca en el corte, la misma foto desenfocada de fondo,
   "de nuevo" en el color de la marca y el escudo más grande. */
[data-tema="cliente"].login-foto #login-page::before{display:block;position:fixed;inset:-40px;width:auto;height:auto;border-radius:0;
  background:#111 var(--lm-foto) center/cover no-repeat;filter:blur(16px) brightness(.32) saturate(.8)}
[data-tema="cliente"].login-foto .login-marca{border-radius:18px 0 0 18px}
[data-tema="cliente"].login-foto .login-marca::after{display:block;content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;border:0;border-radius:0;
  background:var(--blue);clip-path:polygon(calc(100% - 10px) 0,100% 0,calc(100% - 96px) 100%,calc(100% - 106px) 100%)}
[data-tema="cliente"].login-foto .login-card-wrapper{margin-left:-96px;padding-left:calc(44px + 96px);border-radius:0 18px 18px 0;
  clip-path:polygon(96px 0,100% 0,100% 100%,0 100%)}
[data-tema="cliente"].login-foto .lm-logo .marca-logo{width:150px !important}
[data-tema="cliente"].login-foto .lm-hola span{color:var(--blue)}
[data-tema="cliente"].login-foto .lm-cuerpo{padding-right:90px}
[data-tema="cliente"].login-foto .login-box h1::before{content:"";display:block;width:56px;height:4px;background:var(--blue);margin-bottom:1rem}
@media(max-width:900px){
  [data-tema="cliente"].login-foto .login-marca::after{display:none}
  [data-tema="cliente"].login-foto .login-card-wrapper{margin-left:0;padding-left:22px;clip-path:none;border-radius:0 0 18px 18px}
  [data-tema="cliente"].login-foto .lm-logo .marca-logo{width:84px !important}
  [data-tema="cliente"].login-foto .lm-cuerpo{padding-right:0}
}

/* ---------- Movimiento del login (corto y una sola vez) ---------- */
.lm-foto,.lm-arco{display:none}
[data-tema="cliente"].login-foto .login-marca{background:#111}
[data-tema="cliente"].login-foto .lm-foto{display:block;position:absolute;inset:0;z-index:-2;background:var(--lm-foto) right center/cover no-repeat;
  animation:lm-acerca 1.6s cubic-bezier(.2,.7,.2,1) both;transition:filter .3s}
@keyframes lm-acerca{from{transform:scale(1.08)}to{transform:none}}
[data-tema="cliente"] .lm-logo,[data-tema="cliente"] .lm-cuerpo{position:relative;z-index:1;animation:lm-sube .7s cubic-bezier(.2,.7,.2,1) both}
[data-tema="cliente"] .lm-cuerpo{animation-delay:.12s}
@keyframes lm-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-tema="cliente"] .btn-login{transition:background .15s,transform .1s}
[data-tema="cliente"] .btn-login:active{transform:scale(.98)}

/* ---------- Efecto "arco de soldadura": al escribir la contraseña el arco se enciende ----------
   La posición del arco en la foto la calcula js/login.js (--arco-x, --arco-y). */
[data-tema="cliente"].efecto-soldadura .lm-arco{display:block;position:absolute;z-index:0;pointer-events:none;
  left:var(--arco-x,75%);top:var(--arco-y,80%);width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 5%,rgba(214,236,255,.85) 11%,color-mix(in srgb,var(--blue) 55%,transparent) 26%,color-mix(in srgb,var(--blue) 18%,transparent) 44%,transparent 64%);
  mix-blend-mode:screen;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
[data-tema="cliente"].efecto-soldadura .login-marca.encendido .lm-arco{opacity:.95;transform:scale(1);animation:lm-titila 1.1s ease-in-out infinite}
[data-tema="cliente"].efecto-soldadura .login-marca.encendido .lm-foto{filter:brightness(1.12) saturate(1.1)}
[data-tema="cliente"].efecto-soldadura .login-marca.chispazo .lm-arco{transform:scale(1.18);opacity:1;transition-duration:.06s}
@keyframes lm-titila{0%,100%{opacity:.95}30%{opacity:.8}55%{opacity:1}75%{opacity:.86}}
.lm-chispa{position:absolute;z-index:0;width:4px;height:4px;border-radius:50%;background:#FFD9A8;box-shadow:0 0 6px 2px color-mix(in srgb,var(--blue) 70%,transparent);
  pointer-events:none;animation:lm-chispa var(--t,.6s) cubic-bezier(.15,.6,.4,1) forwards}
@keyframes lm-chispa{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}

@media (prefers-reduced-motion:reduce){
  [data-tema="cliente"] .lm-foto,[data-tema="cliente"] .lm-logo,[data-tema="cliente"] .lm-cuerpo{animation:none}
  [data-tema="cliente"].efecto-soldadura .login-marca.encendido .lm-arco{animation:none}
  .lm-chispa{display:none}
}
@media(max-width:900px){
  [data-tema="cliente"].efecto-soldadura .lm-arco{width:180px;height:180px;margin:-90px 0 0 -90px}
}

/* ==========================================================
   LOGIN CON FOTO, ESTILO SUAVE (spa, estética, consultorio)
   Configuración → Estilo del inicio de sesión: "Suave".
   Velo claro del tono de la marca sobre la parte alta de la foto,
   logo redondo al centro, curva entre la foto y el formulario.
   ========================================================== */
[data-tema="cliente"] .lm-eslogan:has(span:empty){display:none}
[data-tema="cliente"].login-foto.login-suave #login-page{background:var(--lm-fondo)}
[data-tema="cliente"].login-foto.login-suave #login-page::before,
[data-tema="cliente"].login-foto.login-suave #login-page::after{display:block;position:fixed;inset:auto;filter:none;background:color-mix(in srgb,var(--blue) 40%,white)}
[data-tema="cliente"].login-foto.login-suave #login-page::before{width:58vw;height:70vh;left:-14vw;top:-26vh;border-radius:42% 58% 63% 37% / 46% 41% 59% 54%}
[data-tema="cliente"].login-foto.login-suave #login-page::after{width:46vw;height:62vh;right:-12vw;bottom:-24vh;border-radius:61% 39% 44% 56% / 52% 60% 40% 48%}
[data-tema="cliente"].login-foto.login-suave .login-marca{border-radius:26px 0 0 26px;align-items:center;text-align:center;color:var(--ink);
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--blue) 45%,black)}
[data-tema="cliente"].login-foto.login-suave .lm-foto{background-position:center 70%}
[data-tema="cliente"].login-foto.login-suave .login-marca::before{
  background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 7%,#FFF7F8) 0%,color-mix(in srgb,color-mix(in srgb,var(--blue) 7%,#FFF7F8) 88%,transparent) 42%,transparent 72%)}
[data-tema="cliente"].login-foto.login-suave .login-marca::after{display:none}
[data-tema="cliente"].login-foto.login-suave .lm-logo{align-self:center;margin-top:6px}
[data-tema="cliente"].login-foto.login-suave .lm-logo .marca-logo{width:118px !important;height:118px !important;border-radius:50%;
  box-shadow:0 0 0 6px rgba(255,255,255,.75),0 10px 26px -10px color-mix(in srgb,var(--blue) 60%,black);filter:none}
[data-tema="cliente"].login-foto.login-suave .lm-cuerpo{margin:22px 0 auto;padding:0;max-width:440px}
[data-tema="cliente"].login-foto.login-suave .lm-hola{color:var(--blue);font-size:clamp(34px,3vw,44px);text-wrap:balance}
[data-tema="cliente"].login-foto.login-suave .lm-cuerpo{padding-right:70px}
[data-tema="cliente"].login-foto.login-suave .lm-hola::after{display:none}
[data-tema="cliente"].login-foto.login-suave .lm-hola span{color:inherit}
[data-tema="cliente"].login-foto.login-suave .lm-nombre{display:none}
[data-tema="cliente"].login-foto.login-suave .lm-eslogan{display:flex;align-items:center;gap:14px;color:var(--hondo);font-size:1.12rem}
[data-tema="cliente"].login-foto.login-suave .lm-eslogan::before,
[data-tema="cliente"].login-foto.login-suave .lm-eslogan::after{content:"";flex:1;min-width:24px;height:1px;background:color-mix(in srgb,var(--blue) 45%,transparent)}
/* La curva: el formulario entra sobre la foto con el borde redondeado y un filo vino */
[data-tema="cliente"].login-foto.login-suave .login-card-wrapper{clip-path:none;margin-left:-80px;padding-left:calc(44px + 50px);
  border-radius:80px 26px 26px 80px / 50% 26px 26px 50%;box-shadow:-7px 0 0 0 var(--blue),0 30px 60px -30px color-mix(in srgb,var(--blue) 45%,black)}
[data-tema="cliente"].login-foto.login-suave .login-box h1::before{display:none}
[data-tema="cliente"].login-foto.login-suave .login-box h1{color:var(--blue)}
[data-tema="cliente"].login-foto.login-suave .input-wrap input,
[data-tema="cliente"].login-foto.login-suave .btn-login,
[data-tema="cliente"].login-foto.login-suave .btn-login:hover{border-radius:999px}
@media(max-width:900px){
  [data-tema="cliente"].login-foto.login-suave .login-marca{border-radius:22px 22px 0 0;min-height:250px;justify-content:flex-start}
  [data-tema="cliente"].login-foto.login-suave .lm-logo .marca-logo{width:72px !important;height:72px !important}
  [data-tema="cliente"].login-foto.login-suave .lm-cuerpo{margin-top:10px}
  [data-tema="cliente"].login-foto.login-suave .lm-hola{font-size:32px}
  [data-tema="cliente"].login-foto.login-suave .lm-eslogan{display:flex}
  [data-tema="cliente"].login-foto.login-suave .login-card-wrapper{margin-left:0;padding-left:22px;border-radius:0 0 22px 22px;box-shadow:0 -5px 0 0 var(--blue)}
}

/* ---------- Efecto "pétalos cayendo" (js/login.js crea los pétalos) ---------- */
.lm-petalos{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.lm-petalo{position:absolute;top:-40px;left:var(--x);animation:lm-cae var(--t) linear var(--d) infinite}
.lm-petalo i{display:block;width:calc(var(--s) * .7);height:var(--s);animation:lm-mece calc(var(--t) / 3) ease-in-out var(--d) infinite alternate}
.lm-petalo svg{display:block;width:100%;height:100%;fill:var(--c);opacity:.9}
@keyframes lm-cae{from{transform:translateY(0)}to{transform:translateY(calc(100vh + 80px))}}
@keyframes lm-mece{from{transform:translateX(-26px) rotate(-25deg) rotateY(0)}to{transform:translateX(26px) rotate(35deg) rotateY(160deg)}}
@media (prefers-reduced-motion:reduce){.lm-petalos{display:none}}

/* ---------- Saludo y frase de bienvenida del login ---------- */
.lm-frase{display:none}
[data-tema="cliente"] .lm-frase{display:block;margin:.7rem 0 0;font-size:1.05rem;line-height:1.45;color:var(--ink)}
[data-tema="cliente"] .lm-frase:empty{display:none}
[data-tema="cliente"] .login-marca.con-frase .lm-eslogan{display:none}
[data-tema="cliente"] .lm-hola span{color:var(--blue)}
[data-tema="cliente"].login-foto .lm-frase{color:rgba(255,255,255,.9)}
[data-tema="cliente"].login-foto.login-suave .lm-frase{color:var(--hondo);font-size:1.12rem;max-width:360px;margin-inline:auto}
[data-tema="cliente"].login-foto.login-suave .lm-hola span{color:inherit}
@media(max-width:900px){[data-tema="cliente"] .lm-frase{font-size:.95rem;margin-top:.35rem}}

@media(max-width:900px){[data-tema="cliente"].login-foto.login-suave .lm-cuerpo{padding-right:0}}

/* ==========================================================
   PANEL SUAVE (estilo "Suave" en Configuración: spa, estética)
   Claro y aireado: menú claro con la opción activa rellena del
   color de la marca, tarjetas tintadas sin borde y muy redondeadas,
   números grandes y livianos.
   ========================================================== */
:root[data-tema="cliente"].panel-suave{
  --bg:color-mix(in srgb,var(--blue) 9%,#FFF6F8);      /* fondo: rosado suave del tono de la marca */
  --bg2:color-mix(in srgb,var(--blue) 2.5%,#FFFFFF);    /* tarjetas: más claras que el fondo */
  --panel:var(--bg2);
  --bg3:color-mix(in srgb,var(--blue) 11%,#FFFFFF);
  --line:color-mix(in srgb,var(--blue) 10%,#F1ECEE);
  --marco:color-mix(in srgb,var(--blue) 16%,#EAE3E6);
  --tinte:color-mix(in srgb,var(--blue) 9%,#FFFFFF);
}
/* Menú claro */
[data-tema="cliente"].panel-suave .sidebar{background:#fff;color:var(--ink);border-right:0;box-shadow:1px 0 0 var(--line)}
[data-tema="cliente"].panel-suave .sb-logo{border-bottom:0}
[data-tema="cliente"].panel-suave .sb-logo .wm{color:var(--blue)}
[data-tema="cliente"].panel-suave .sb-logo small{color:var(--muted)}
[data-tema="cliente"].panel-suave .sb-logo .marca-logo{padding:0;background:none;border-radius:50%}
[data-tema="cliente"].panel-suave .sb-group{color:var(--faint)}
[data-tema="cliente"].panel-suave .sb-nav a{color:color-mix(in srgb,var(--blue) 55%,var(--ink));font-weight:500;border-radius:12px;padding:.72rem 1rem}
[data-tema="cliente"].panel-suave .sb-nav a svg{color:var(--blue)}
[data-tema="cliente"].panel-suave .sb-nav a:hover{background:var(--tinte);color:var(--blue)}
[data-tema="cliente"].panel-suave .sb-nav a.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 8px 18px -10px var(--blue)}
[data-tema="cliente"].panel-suave .sb-nav a.active svg{color:#fff}
[data-tema="cliente"].panel-suave .sb-footer{border-top:1px solid var(--line)}
[data-tema="cliente"].panel-suave .sb-user strong{color:var(--ink)}
[data-tema="cliente"].panel-suave .sb-user small{color:var(--muted)}
[data-tema="cliente"].panel-suave .sb-user .av{background:var(--blue);color:#fff}
[data-tema="cliente"].panel-suave .sidebar .logout-btn{background:var(--tinte);border:0;color:var(--blue)}
[data-tema="cliente"].panel-suave .sidebar .logout-btn:hover{background:var(--bg3)}
[data-tema="cliente"].panel-suave .sidebar *{scrollbar-color:var(--marco) transparent}

/* Tarjetas: velo del color, sin borde, esquinas amplias */
[data-tema="cliente"].panel-suave :is(.stat-card,.panel-card,.config-group,.table-wrap,.callout,.g-card,.ag-kpis,.k-card){border:0;border-radius:20px;background:var(--bg2)}
[data-tema="cliente"].panel-suave .ag-kpis{background:transparent;gap:16px;overflow:visible}
[data-tema="cliente"].panel-suave .ag-kpi{background:var(--bg2);border-radius:20px;padding:1.3rem 1.5rem}
[data-tema="cliente"].panel-suave .ag-kpi+.ag-kpi{border-left:0}
[data-tema="cliente"].panel-suave .ag-kpi b{font-family:var(--font-b);font-weight:500;font-size:2.4rem;letter-spacing:-.02em}
[data-tema="cliente"].panel-suave .ag-kpi.lider{background:var(--blue)}
[data-tema="cliente"].panel-suave .ag-kpi.lider b{font-size:2.8rem}
[data-tema="cliente"].panel-suave :is(.agenda-item,.rel-item,.quick-link-btn){background:#fff;border:0;border-radius:14px}
[data-tema="cliente"].panel-suave .agenda-date{background:var(--tinte);border:0;border-radius:12px}
[data-tema="cliente"].panel-suave .panel-head{border-bottom:0}
[data-tema="cliente"].panel-suave .panel-head h3{color:var(--ink);font-family:var(--font-b);font-weight:600;font-size:1.1rem}

/* Encabezados livianos */
[data-tema="cliente"].panel-suave .dash-header-wrap,[data-tema="cliente"].panel-suave .mod-head{border-bottom:0}
[data-tema="cliente"].panel-suave :is(.dash-welcome h2,.mod-title h2,.home-title){color:var(--ink);font-family:var(--font-b);font-weight:600;letter-spacing:-.02em}
[data-tema="cliente"].panel-suave .mod-ico{background:var(--bg2);border:0;border-radius:14px;color:var(--blue)}

/* Controles redondeados y sin bordes duros */
[data-tema="cliente"].panel-suave :is(.btn-g,.btn-icon-act){background:#fff;border:1px solid var(--line);border-radius:999px}
[data-tema="cliente"].panel-suave .btn-p{border-radius:999px;box-shadow:0 8px 18px -10px var(--blue)}
[data-tema="cliente"].panel-suave :is(.search-wrap input,select.filter){background:#fff;border:1px solid var(--line);border-radius:999px}
[data-tema="cliente"].panel-suave .seg{background:#fff;border:1px solid var(--line);border-radius:999px}
[data-tema="cliente"].panel-suave .seg button{border-radius:999px}
[data-tema="cliente"].panel-suave .seg button.on{background:var(--blue);color:#fff;border:0}
[data-tema="cliente"].panel-suave thead th{border-bottom:1px solid var(--line)}
[data-tema="cliente"].panel-suave tbody tr{border-bottom:1px solid var(--line)}
[data-tema="cliente"].panel-suave .col{background:var(--bg2);border:0;border-radius:20px}
[data-tema="cliente"].panel-suave .k-card{background:#fff}
@media(max-width:800px){
  [data-tema="cliente"].panel-suave .ag-kpis{gap:10px}
  [data-tema="cliente"].panel-suave .ag-kpi b{font-size:1.9rem}
  [data-tema="cliente"].panel-suave .ham{background:#fff;border:1px solid var(--line)}
}

/* ==========================================================
   INICIO DE LOS PANELES DE CLIENTES: encabezado de bienvenida
   Logo grande, saludo, nombre del negocio con la última palabra en
   su color, y la foto del negocio a la derecha con un corte diagonal.
   ========================================================== */
.ini-banner{display:none}
[data-tema="cliente"] .ini-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,3vw,36px);
  position:relative;overflow:hidden;isolation:isolate;min-height:220px;margin-bottom:1.6rem;padding:clamp(22px,3vw,36px) clamp(22px,3.5vw,44px);
  border-radius:20px;background:var(--hondo);color:#fff}
[data-tema="cliente"] .ini-banner ~ .hero-wrap,
[data-tema="cliente"] .ini-banner ~ .home-title,
[data-tema="cliente"] .ini-banner ~ .home-sub{display:none}
[data-tema="cliente"] .ini-logo .marca-logo{width:120px !important;height:auto !important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
[data-tema="cliente"] .ini-logo .marca-mono{width:96px !important;height:96px !important;font-size:44px !important}
[data-tema="cliente"] .ini-txt{position:relative;z-index:1;max-width:620px}
[data-tema="cliente"] .ini-hola{margin:0 0 .3rem;font-size:1.05rem;color:rgba(255,255,255,.75)}
[data-tema="cliente"] .ini-txt h1{margin:0;font:700 clamp(30px,3.4vw,48px)/1.02 var(--font-d);letter-spacing:-.01em;color:#fff}
[data-tema="cliente"] .ini-txt h1 span{color:var(--blue)}
[data-tema="cliente"] .ini-frase{margin:.7rem 0 0;font-size:1.05rem;color:rgba(255,255,255,.82)}
[data-tema="cliente"] .ini-frase:empty{display:none}
[data-tema="cliente"] .ini-frase::after{content:"";display:block;width:56px;height:3px;background:var(--blue);margin-top:.8rem}
/* La foto ocupa la derecha, cortada en diagonal, con un filo del color de la marca */
[data-tema="cliente"] .ini-foto{display:none}
[data-tema="cliente"] .ini-banner.con-foto .ini-foto{display:block;position:absolute;z-index:-1;top:0;right:0;bottom:0;width:42%;
  background:var(--ini-foto) center/cover no-repeat;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
[data-tema="cliente"] .ini-banner.con-foto::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:42%;
  background:var(--blue);clip-path:polygon(17% 0,18.6% 0,1.6% 100%,0 100%)}
[data-tema="cliente"] .ini-banner.con-foto .ini-txt{max-width:min(560px,calc(58vw - 420px))}
@media(max-width:800px){
  [data-tema="cliente"] .ini-banner{grid-template-columns:1fr;min-height:0;gap:14px}
  [data-tema="cliente"] .ini-logo .marca-logo{width:76px !important}
  [data-tema="cliente"] .ini-banner.con-foto .ini-foto{width:100%;clip-path:none;opacity:.28}
  [data-tema="cliente"] .ini-banner.con-foto::after{display:none}
  [data-tema="cliente"] .ini-banner.con-foto .ini-txt{max-width:100%}
}
/* Estilo suave: el mismo encabezado, claro */
[data-tema="cliente"].panel-suave .ini-banner{background:var(--bg2);color:var(--ink)}
[data-tema="cliente"].panel-suave .ini-hola{color:var(--muted)}
[data-tema="cliente"].panel-suave .ini-txt h1{color:var(--ink);font-family:var(--font-b);font-weight:600}
[data-tema="cliente"].panel-suave .ini-frase{color:var(--muted)}
[data-tema="cliente"].panel-suave .ini-logo .marca-logo{border-radius:50%;filter:none;box-shadow:0 0 0 6px #fff}
[data-tema="cliente"].panel-suave .ini-banner.con-foto .ini-foto{clip-path:ellipse(100% 120% at 100% 50%)}
[data-tema="cliente"].panel-suave .ini-banner.con-foto::after{display:none}

/* ==========================================================
   PANEL SOBRIO (clientes sin estilo "Suave", ej. WG 13)
   Lienzo gris claro, tarjetas blancas con sombra leve y la opción
   activa del menú rellena del color de la marca.
   ========================================================== */
:root[data-tema="cliente"]:not(.panel-suave){
  --bg:color-mix(in srgb,var(--blue) 2%,#F1F2F4);
  --bg2:#FFFFFF;--panel:#FFFFFF;
  --bg3:color-mix(in srgb,var(--blue) 5%,#EEF0F2);
  --line:color-mix(in srgb,var(--blue) 6%,#E3E5E8);
  --marco:color-mix(in srgb,var(--blue) 10%,#D9DCE0);
  --tinte:color-mix(in srgb,var(--blue) 7%,#FFFFFF);
}
[data-tema="cliente"]:not(.panel-suave) .sidebar{background:color-mix(in srgb,var(--hondo) 40%,#15181C)}
[data-tema="cliente"]:not(.panel-suave) .sb-nav a.active{background:var(--blue);color:#fff;box-shadow:0 8px 18px -10px var(--blue)}
[data-tema="cliente"]:not(.panel-suave) .sb-nav a.active svg{color:#fff}
[data-tema="cliente"]:not(.panel-suave) .sb-nav a{border-radius:10px}
[data-tema="cliente"]:not(.panel-suave) .sb-logo .marca-logo{background:none;padding:0}
[data-tema="cliente"]:not(.panel-suave) :is(.stat-card,.panel-card,.config-group,.table-wrap,.g-card,.ag-kpis){border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(16,18,22,.04),0 6px 16px -10px rgba(16,18,22,.12)}
[data-tema="cliente"]:not(.panel-suave) .stat-val{font-family:var(--font-d);font-size:2.8rem}
[data-tema="cliente"]:not(.panel-suave) .ini-banner{background:color-mix(in srgb,var(--hondo) 40%,#15181C)}

/* ---------- Ajustes de uso (revisión con el cliente) ---------- */
/* Títulos de Configuración y Mi cuenta sin emoji: el resto del panel usa iconos de línea en el color de la marca */
[data-tema="cliente"] .config-group h3 .emo{display:none}
/* Celular: aire al final para que el botón fijo "+ Nuevo" no tape lo último de la lista */
@media (max-width:800px){[data-tema="cliente"] .main{padding-bottom:5.5rem}}
/* Inicio de un negocio de citas: primero el saludo con la marca, luego "Lo de hoy". Más bajo que en la portada: lo importante son las citas */
[data-tema="cliente"] #sec-dashboard .ini-banner{order:-4;min-height:168px;margin-bottom:1.4rem;padding-block:clamp(18px,2.2vw,26px)}
[data-tema="cliente"] #sec-dashboard .ini-logo .marca-logo{width:96px !important}
@media (max-width:800px){
  [data-tema="cliente"] #sec-dashboard .ini-banner{flex:none;padding:18px}
  [data-tema="cliente"] #sec-dashboard .ini-logo .marca-logo{width:64px !important}
  [data-tema="cliente"] #sec-dashboard .ini-banner.con-foto .ini-foto{opacity:.16}
}
/* Estilo suave (spa, salón): una sola letra en todo el panel. La condensada es del estilo sobrio (taller, ferretería)
   y se veía industrial al lado del logo; antes aparecía en unos títulos sí y en otros no. */
[data-tema="cliente"]:is(.panel-suave,.login-suave){--font-d:var(--font-b)}
[data-tema="cliente"]:is(.panel-suave,.login-suave) :is(.top-bar h2,.config-group h3,.lm-hola,.login-header h1,.home-head h3){font-weight:600;letter-spacing:-.02em}