/* =====================================================================
   SISTEMA APPLE · Cosapi Gastos (18-10-2026)
   Aplicación íntegra de ~/.claude/skills/awesome-design-md/design-md/apple/DESIGN.md a una app de trabajo
   (modo Operate). Se carga al final y manda sobre todas las hojas anteriores.

   Reglas que se respetan:
   · Un solo color de acción: Action Blue #0066cc (foco #0071e3). Nada más es interactivo con color.
   · Tipografía SF Pro (Inter fuera de Apple), escalera 400 / 600 (sin 500). Cuerpo 17 px / 1,47.
   · Jerarquía: título de página 40 px (34 en celular) → sección 21 px → cuerpo 17 → leyenda 14 → letra fina 12.
   · Sin degradados decorativos ni sombras en tarjetas, botones o texto. La única sombra es la de Cosapín
     (el «producto») apoyado sobre una superficie.
   · Superficies: pergamino #f5f5f7 de fondo, tarjetas blancas con filete de 1 px y radio 18; mosaico oscuro
     #272729 para el destacado de Inicio (el cambio de color es el divisor).
   · Botones: píldora azul (principal), píldora fantasma azul (secundario), cápsula perla (acciones de fila),
     rectángulo oscuro de utilidad (barra superior). Al presionar: scale(.95).
   ===================================================================== */
:root{
 --a-primary:#0066cc;--a-focus:#0071e3;--a-on-dark-link:#2997ff;
 --a-ink:#1d1d1f;--a-ink-80:#333;--a-muted:#6e6e73;--a-disabled:#7a7a7a;
 --a-canvas:#fff;--a-parchment:#f5f5f7;--a-pearl:#fafafc;--a-tile:#272729;--a-tile-2:#2a2a2c;
 --a-hairline:#e0e0e0;--a-divider:rgba(0,0,0,.08);--a-chip:rgba(210,210,215,.64);
 --a-shadow-product:rgba(0,0,0,.22) 3px 5px 30px 0;
 --a-r-sm:8px;--a-r-md:11px;--a-r-lg:18px;--a-pill:9999px;
 --a-text:"SF Pro Text",system-ui,-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
 --a-display:"SF Pro Display",system-ui,-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
 /* Los nombres que ya usa el resto del código apuntan al sistema nuevo */
 --sys:var(--a-text);--sys-display:var(--a-display);--blue:var(--a-primary);--ink:var(--a-ink);--muted:var(--a-muted);
 --tile:var(--a-parchment);--hairline:var(--a-hairline);--line:var(--a-hairline);--apple-link:var(--a-primary);--apple-muted:var(--a-muted)
}

/* ---------- Tipografía ---------- */
html,body,button,input,select,textarea{font-family:var(--a-text)!important;font-feature-settings:"ss03"}
body{font-size:17px!important;line-height:1.47;letter-spacing:-.374px;color:var(--a-ink);background:var(--a-parchment)!important;-webkit-font-smoothing:antialiased}
*{font-weight:inherit}
b,strong,th,h1,h2,h3,h4,.tagline{font-weight:600!important}
h1,h2,h3,.page-top h1,.hero h2,.login h1,.welcome h1{font-family:var(--a-display)!important;color:var(--a-ink)}
/* Título de página (display-lg) */
.page-top h1,#content>h1{font-size:40px!important;line-height:1.1!important;letter-spacing:-.01em!important}
.page-top p{font-size:17px!important;line-height:1.47;color:var(--a-muted)!important;letter-spacing:-.374px}
/* Título de sección (tagline) */
.panel h2,.card h2,#content section>h2,.fund-card h2,.fund-title,.dialog-head h2,.guide h2,.tour-card h2,.empty h2{font-size:21px!important;line-height:1.19!important;letter-spacing:.231px!important}
.panel h3,#content h3{font-size:17px!important;letter-spacing:-.374px!important}
/* Leyendas y letra fina */
small,.hint,.agent-hint,#content small,.cards .card small,.panel>small,td small{font-size:14px!important;line-height:1.43;letter-spacing:-.224px!important;color:var(--a-muted)!important;font-weight:400!important}
label{font-size:14px!important;letter-spacing:-.224px;color:var(--a-ink-80)!important;font-weight:400!important}
.sidebar-foot,.login-card>small{font-size:12px!important;letter-spacing:-.12px;color:var(--a-muted)!important}
/* Sin texto con degradado: el énfasis es el peso y la escala, no el color */
.grad,.login h1 strong,.hero h2 .grad,.welcome .grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important}
.welcome p{color:var(--a-muted)!important;font-weight:400!important}
body::before{display:none!important}

/* ---------- Enlaces y foco ---------- */
a{color:var(--a-primary)}
#content a:not(.button){color:var(--a-primary)!important}
:focus-visible{outline:2px solid var(--a-focus)!important;outline-offset:2px!important;box-shadow:none!important}

/* ---------- Botones ---------- */
button,.button,a.button,input[type=file]::file-selector-button{
 font:400 17px/1.18 var(--a-text)!important;letter-spacing:-.374px!important;border-radius:var(--a-pill)!important;
 padding:11px 22px!important;min-height:44px;border:1px solid var(--a-primary)!important;background:transparent!important;
 color:var(--a-primary)!important;box-shadow:none!important;background-image:none!important;transition:transform .15s ease,background-color .2s ease}
button:hover:not(:disabled),.button:hover{background:rgba(0,102,204,.06)!important}
button:active:not(:disabled),.button:active{transform:scale(.95)}
button.primary,.primary,a.button.primary,input[type=file]::file-selector-button{background:var(--a-primary)!important;color:#fff!important;border-color:var(--a-primary)!important}
button.primary:hover:not(:disabled),a.button.primary:hover{background:#0058b0!important}
button:disabled{opacity:1!important;color:var(--a-disabled)!important;border-color:var(--a-hairline)!important;background:var(--a-pearl)!important}
button.primary:disabled{background:#c7c7cc!important;border-color:#c7c7cc!important;color:#fff!important}
/* Acciones dentro de filas y tarjetas: cápsula perla */
td button,td .actions button:not(.primary),.fund-card button:not(.primary),.toolbar button:not(.primary),.chip-btn{
 font:400 14px/1.29 var(--a-text)!important;letter-spacing:-.224px!important;border-radius:var(--a-r-md)!important;padding:8px 14px!important;
 min-height:36px;background:var(--a-pearl)!important;color:var(--a-ink-80)!important;border:0!important;box-shadow:0 0 0 3px #f0f0f0!important}
td button:hover,td .actions button:not(.primary):hover,.fund-card button:not(.primary):hover{background:#f0f0f2!important}
/* Peligro: el mismo botón, con texto rojo (el color es estado, no acción) */
button.danger,.button.danger,td button.danger{color:#d70015!important;border-color:rgba(215,0,21,.35)!important}
button.mi-armed{background:#d70015!important;color:#fff!important;border-color:#d70015!important}
/* Barra superior: utilidad oscura */
.profile button,#install{font:400 14px/1.29 var(--a-text)!important;letter-spacing:-.224px!important;border-radius:var(--a-r-sm)!important;padding:8px 15px!important;min-height:36px;
 background:transparent!important;color:#fff!important;border:0!important}
.profile button:hover{background:rgba(255,255,255,.12)!important}
/* Cerrar y controles circulares */
#dialog-close,#guide-close,.close{width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;border:0!important;
 background:var(--a-chip)!important;color:var(--a-ink)!important;font-size:22px!important;display:inline-grid;place-items:center}
#forgot-password,.tour-skip{border:0!important;background:none!important;color:var(--a-primary)!important;padding:8px 4px!important;text-decoration:none!important}

/* ---------- Barra superior (global-nav negra) ---------- */
.shell>header{background:rgba(0,0,0,.92)!important;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
 min-height:48px;height:52px;padding:0 24px!important;border:0!important;color:#fff;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px}
.shell>header #breadcrumbs{color:#fff!important;font:600 14px/1.29 var(--a-text)!important;letter-spacing:-.224px}
.shell>header #user-name{color:#d2d2d7!important;font:400 12px/1 var(--a-text)!important;letter-spacing:-.12px}
#mobile{color:#fff!important;border:0!important;background:transparent!important}
#preview-banner,.dev-banner,#content>.notice:first-child{border-radius:var(--a-r-lg)!important}

/* ---------- Menú lateral ---------- */
.sidebar{background:var(--a-canvas)!important;border-right:1px solid var(--a-divider)!important;box-shadow:none!important}
.sidebar .logo{box-shadow:none!important;border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important}
.sidebar nav a{font:400 14px/1.29 var(--a-text)!important;letter-spacing:-.224px!important;color:var(--a-ink)!important;border-radius:var(--a-r-sm)!important;min-height:40px}
.sidebar nav a.active{background:var(--a-parchment)!important;color:var(--a-primary)!important;font-weight:600!important}
/* Un solo acento: los íconos son glifos en tinta; el activo, en azul */
.sidebar nav a span.nav-chip{background:none!important;color:var(--a-ink)!important;width:24px!important;height:24px!important}
.sidebar nav a span.nav-chip svg{stroke:currentColor!important;width:20px!important;height:20px!important;stroke-width:1.7!important}
.sidebar nav a.active span.nav-chip{color:var(--a-primary)!important}
.sidebar .nav-head{font:600 12px/1 var(--a-text)!important;letter-spacing:-.12px!important;color:var(--a-muted)!important;text-transform:none!important}
.nav-badge{background:var(--a-primary)!important;color:#fff!important;font-weight:600!important}

/* ---------- Superficies ---------- */
.card,.panel,.tile,.fund-card,.form-more,.box-flow,.ai-review,.agent-plan,.steps,.install,.empty{
 background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important;box-shadow:none!important;padding:24px}
.cards{background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important;box-shadow:none!important}
.cards .card{border:0!important;border-radius:0!important;background:transparent!important}
.cards .card+.card{border-left:1px solid var(--a-hairline)!important}
/* Cifras: tinta, sin colores (el único color es la acción) */
.cards .card>strong{font:600 34px/1.1 var(--a-display)!important;letter-spacing:-.374px!important;color:var(--a-ink)!important}
.cards .card:nth-child(n)>strong{color:var(--a-ink)!important}
.cards .card small:first-child{color:var(--a-ink-80)!important}
.fund-money{background:var(--a-parchment)!important;border:0!important;border-radius:var(--a-r-md)!important}
.fund-money strong{font-weight:600!important;color:var(--a-ink)!important}
.fund-money div:nth-child(n) strong{color:var(--a-ink)!important}
.notice{border-radius:var(--a-r-lg)!important;border:1px solid var(--a-hairline)!important;background:var(--a-canvas)!important;color:var(--a-ink)!important;box-shadow:none!important}
.notice.warning{border-color:#f3d9a4!important;background:#fffaf0!important;color:#6b4300!important}
.notice.error{border-color:#f5c2c2!important;background:#fff5f5!important;color:#a3000f!important}
.chip{background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;color:var(--a-ink)!important;border-radius:var(--a-pill)!important;font:400 14px/1.29 var(--a-text)!important;padding:6px 14px!important}
/* Estados: píldora con texto (nunca solo color) */
.pill{border-radius:var(--a-pill)!important;font:600 12px/1.3 var(--a-text)!important;letter-spacing:-.12px!important;padding:4px 10px!important;border:0!important;background:var(--a-parchment)!important;color:var(--a-ink-80)!important}
.pill.approved,.pill.paid,.pill.closed{background:#e8f6ec!important;color:#1d6b34!important}
.pill.submitted,.pill.requested,.pill.review{background:#e6f0fb!important;color:#0058b0!important}
.pill.returned{background:#fff4e0!important;color:#7a4b00!important}
.pill.rejected{background:#fdecec!important;color:#a3000f!important}

/* ---------- Inicio: mosaico oscuro (product-tile-dark) con Cosapín como producto ---------- */
.hero{background:var(--a-tile)!important;border:0!important;border-radius:var(--a-r-lg)!important;color:#fff!important;padding:48px 40px!important;box-shadow:none!important;overflow:hidden}
.hero::after,.hero::before{display:none!important}
.hero h2{color:#fff!important;font-size:40px!important;line-height:1.1!important;letter-spacing:-.01em!important}
.hero p{color:#ccc!important;font-size:21px!important;line-height:1.38!important;letter-spacing:.2px!important;max-width:44ch}
.hero a{color:var(--a-on-dark-link)!important}
.hero button:not(.primary){color:#fff!important;border-color:rgba(255,255,255,.6)!important;background:transparent!important}
.hero button:not(.primary):hover{background:rgba(255,255,255,.1)!important}
.hero .cz3d-img,.login-pet,.welcome img{filter:drop-shadow(3px 5px 30px rgba(0,0,0,.22))!important}
.hero .cz-fx{display:none!important}
.hero .chip-row{display:none!important}

/* ---------- Campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
 font:400 17px/1.3 var(--a-text)!important;letter-spacing:-.374px;border:1px solid var(--a-divider)!important;border-radius:var(--a-r-md)!important;
 background:var(--a-canvas)!important;color:var(--a-ink)!important;min-height:44px;padding:10px 14px!important;box-shadow:none!important}
input[type=search],#search{border-radius:var(--a-pill)!important;padding:12px 20px!important}
input:focus,select:focus,textarea:focus{border-color:var(--a-focus)!important;box-shadow:0 0 0 3px rgba(0,113,227,.18)!important;outline:none!important}
input[type=checkbox],input[type=radio]{accent-color:var(--a-primary)}

/* ---------- Tablas ---------- */
#content table{border-collapse:collapse;background:var(--a-canvas)}
#content th{font:600 12px/1.3 var(--a-text)!important;letter-spacing:-.12px!important;color:var(--a-muted)!important;text-transform:none!important;background:none!important;border-bottom:1px solid var(--a-hairline)!important}
#content td{font-size:14px;letter-spacing:-.224px;border-bottom:1px solid #f0f0f0!important}

/* ---------- Ventanas, guía, recorrido, globo ---------- */
dialog#dialog{border:0!important;border-radius:var(--a-r-lg)!important;box-shadow:0 0 0 1px var(--a-divider),0 24px 60px rgba(0,0,0,.18)!important;background:var(--a-canvas)!important}
dialog::backdrop{background:rgba(0,0,0,.4)!important}
.guide,.tour-card,.cosapin-say{border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important;background:var(--a-canvas)!important;box-shadow:0 12px 40px rgba(0,0,0,.14)!important}
.tour-card::before{display:none!important}
.tour-step{color:var(--a-muted)!important;font:600 12px/1 var(--a-text)!important;letter-spacing:-.12px!important;text-transform:none!important}
.tour-ring{box-shadow:0 0 0 9999px rgba(0,0,0,.5),0 0 0 2px var(--a-focus)!important;border-radius:var(--a-r-md)!important}

/* ---------- Captura del comprobante ---------- */
.drop{background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important}
.capture-tile{border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important;background:var(--a-canvas)!important;box-shadow:none!important}
.ct-ic{background:var(--a-parchment)!important;color:var(--a-ink)!important}
.ct-ic .nav-ic{stroke:currentColor}
.capture-tips li{background:var(--a-parchment)!important;font-size:14px!important}
#capture-steps li{background:var(--a-parchment)!important;color:var(--a-ink-80)!important;border-radius:var(--a-pill)!important;font:400 14px/1.29 var(--a-text)!important}
#capture-steps li.on,#capture-steps li.active{background:var(--a-primary)!important;color:#fff!important}
.mi-ai{background:var(--a-parchment)!important}
.mi-ai-dot{background:var(--a-primary)!important}
.mi-folder-back,.mi-folder-back::before{background:#8fb8e6!important}
.mi-folder-front{background:#5b9be0!important}

/* ---------- Ingreso y bienvenida (product-tile-parchment) ---------- */
.login{background:var(--a-parchment)!important}
.login::before,.login::after{display:none!important}
.login-brand h1{font-size:clamp(40px,5vw,56px)!important;line-height:1.07!important;letter-spacing:-.28px!important}
.login-brand h1 strong{color:var(--a-ink)!important}
.login-brand p{font-size:21px!important;line-height:1.38;color:var(--a-muted)!important}
.login-card{background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;border-radius:var(--a-r-lg)!important;box-shadow:none!important;backdrop-filter:none!important}
.welcome{background:var(--a-parchment)!important}
.welcome::before{display:none!important}

/* ---------- Barra inferior del celular (floating-sticky-bar) ---------- */
@media(max-width:760px){
 .shell>header{min-height:44px}
 .page-top h1,#content>h1{font-size:34px!important;line-height:1.12!important;letter-spacing:-.374px!important}
 .hero{padding:32px 24px!important;border-radius:var(--a-r-lg)!important}
 .hero h2{font-size:34px!important}
 .hero p{font-size:17px!important}
 .tabbar{background:rgba(245,245,247,.95)!important;backdrop-filter:saturate(180%) blur(20px)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;
  border:1px solid var(--a-divider)!important;box-shadow:none!important}
 .tabbar .tab{font:400 10px/1 var(--a-text)!important;letter-spacing:-.08px!important;color:var(--a-muted)!important}
 .tabbar .tab.active{background:transparent!important;color:var(--a-primary)!important;font-weight:600!important}
 .tabbar .tab-cam,.tabbar .tab-cam span{color:var(--a-primary)!important;font-weight:400!important}
 .tabbar .tab .nav-ic{stroke-width:1.7!important}
 #content tr{border:1px solid var(--a-hairline)!important;box-shadow:none!important;border-radius:var(--a-r-lg)!important}
 #content td{font-size:15px;border:0!important}
 .sidebar{border-right:0!important}
}
@media(max-width:419px){.page-top h1,#content>h1{font-size:28px!important}.hero h2{font-size:28px!important}}
@media(prefers-reduced-motion:reduce){button:active,.button:active{transform:none}}
/* Encabezado de página y destacado: píldoras (principal azul, secundaria fantasma) de 17 px */
.page-top button,.page-top .button,.hero button{font-size:17px!important;padding:11px 22px!important;border-radius:var(--a-pill)!important;min-height:44px}
.page-top button:not(.primary){background:transparent!important;color:var(--a-primary)!important;border:1px solid var(--a-primary)!important;box-shadow:none!important}
.shell>header .profile{margin-left:auto;display:flex;align-items:center;gap:4px}
@media(max-width:760px){.shell>header{height:44px;padding:0 12px!important}.page-top button{font-size:17px!important}}
.page-top button.danger,#content button.danger{color:#d70015!important;border-color:rgba(215,0,21,.45)!important;background:transparent!important}
/* Sin tarjeta dentro de tarjeta: lo anidado se integra al panel */
#content .fund-card,#content .fund-card.replenish,#content .fund-card[class]{box-shadow:none!important}
.panel .notice,.card .notice{border:0!important;background:var(--a-parchment)!important}
.panel .table-wrap,.panel .table-wrap table{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}

/* =====================================================================
   VARIANTE CLARA CON ARCOÍRIS (pedido 18-10-2026): fondo blanco en vez de los mosaicos negros y la paleta
   arcoíris de la presentación en el titular, los íconos de módulo, las cifras y la franja superior.
   El azul sigue siendo el único color de los botones y enlaces.
   ===================================================================== */
:root{--a-rainbow:linear-gradient(90deg,#0071e3 0%,#5856d6 22%,#af52de 44%,#ff2d55 66%,#ff9500 88%,#ffcc00 100%)}
/* Franja arcoíris arriba */
body::before{display:block!important;content:'';position:fixed;inset:0 0 auto 0;height:3px;background:var(--a-rainbow)!important;z-index:60;pointer-events:none}
/* Barra superior blanca esmerilada */
.shell>header{background:rgba(255,255,255,.86)!important;color:var(--a-ink)!important;border-bottom:1px solid var(--a-divider)!important}
.shell>header #breadcrumbs{color:var(--a-ink)!important}
.shell>header #user-name{color:var(--a-muted)!important}
.profile button,#install{color:var(--a-primary)!important}
.profile button:hover{background:rgba(0,102,204,.06)!important}
#mobile{color:var(--a-ink)!important}
/* Destacado de Inicio: mosaico blanco */
.hero{background:var(--a-canvas)!important;border:1px solid var(--a-hairline)!important;color:var(--a-ink)!important}
.hero h2{color:var(--a-ink)!important}
.hero p{color:var(--a-muted)!important}
.hero a{color:var(--a-primary)!important}
.hero button:not(.primary){color:var(--a-primary)!important;border-color:var(--a-primary)!important;background:transparent!important}
.hero button:not(.primary):hover{background:rgba(0,102,204,.06)!important}
.hero .chip-row{display:flex!important}
/* Texto arcoíris en el titular (como la presentación) */
.grad,.hero h2 .grad,.login h1 strong,.login-brand h1 strong,.welcome .grad{background:var(--a-rainbow)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
/* Íconos de módulo: cuadros de color de Apple */
.sidebar nav a span.nav-chip{width:30px!important;height:30px!important;border-radius:8px!important;background:var(--c1,#007aff)!important;color:#fff!important}
.sidebar nav a span.nav-chip svg{stroke:#fff!important;width:18px!important;height:18px!important;stroke-width:2!important}
.sidebar nav a.active span.nav-chip{color:#fff!important}
/* Cifras de Inicio en los colores de la paleta */
.cards .card:nth-child(1)>strong{color:#0071e3!important}.cards .card:nth-child(2)>strong{color:#ff9500!important}
.cards .card:nth-child(3)>strong{color:#af52de!important}.cards .card:nth-child(4)>strong{color:#34c759!important}
/* Chips de colores */
.chip{border:0!important;font-weight:600!important;font-size:13px!important;background:color-mix(in srgb,var(--c,#0071e3) 12%,#fff)!important;color:var(--tc,#0058b0)!important}
.chip-orange{--c:#ff9500;--tc:#9a4f00}.chip-pink{--c:#ff2d55;--tc:#c00f3c}.chip-purple{--c:#af52de;--tc:#7d3aa0}.chip-green{--c:#34c759;--tc:#1d6b34}
/* Ingreso: fondo blanco */
.login,.welcome{background:var(--a-canvas)!important}
/* Fondo blanco en toda la app; las tarjetas se separan por su filete */
body,#app,.shell,main,#content{background:var(--a-canvas)!important}
.fund-money,.panel .notice,.card .notice{background:var(--a-parchment)!important}
@media(max-width:760px){.tabbar{background:rgba(255,255,255,.95)!important}}