/* ChicRose · hoja de la aplicacion. Va DESPUES de chicrose.css (la hoja del diseno final, sin cambios).
   Aqui solo esta lo que el prototipo no resuelve: contenedor responsive (celular, tableta, escritorio),
   elementos reales de formulario con la apariencia de .box y .chip, enlaces con apariencia de boton,
   aviso emergente fijo y foco visible. Los nombres de clase son los de diseno_final_componentes.md. */
body{background:#fff;margin:0}
a{color:inherit}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;background:var(--negro);color:#fff;padding:10px 14px;border-radius:8px;z-index:50;font-weight:600}
.skip:focus{top:8px}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}   /* anillo del diseno; el contorno transparente se ve en modo de alto contraste */

/* estructura */
.app{min-height:100vh;display:block}
.app-main{display:flex;flex-direction:column;min-height:100vh;min-width:0}
.app-main>.body{flex:1;width:100%;max-width:640px;margin:0 auto}
.app-main>.appbar{position:sticky;top:0;z-index:20}
.appbar .back-link{min-width:44px;min-height:44px;display:grid;place-items:center;margin-left:-10px;text-decoration:none}
.appbar a.me,.appbar a.ibtn{text-decoration:none}
.side{display:none}
.nav{position:sticky;bottom:0;z-index:20}
.nav a.n,.nav a.plus{text-decoration:none;color:var(--negro)}
.nav .plus .c{box-shadow:0 0 0 3px #fff}
.publico{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;background:#fff}
.publico .tarjeta{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.publico .logo-lg{align-self:center}
.pie-publico{margin-top:auto;padding-top:24px}

/* elementos reales de formulario con la apariencia de .box */
.field input[type=text],.field input[type=search],.field input[type=password],.field input[type=number],.field input[type=date],
.field input[type=time],.field input[type=email],.field input[type=tel],.field select,.field textarea,input.box,select.box,textarea.box{
 width:100%;min-height:48px;border:1.5px solid var(--borde-campo);border-radius:var(--r-campo);padding:6px 12px;background:#fff;
 font:inherit;font-size:16px;line-height:24px;color:var(--negro);display:block}
.field textarea,textarea.box{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--negro);outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--err);border-width:2px}
.field input[readonly],.field input:disabled,.field select:disabled{background:var(--nube);border-color:var(--borde);color:var(--negro)}
.field .con-boton{display:flex;gap:8px;align-items:stretch}
.field .con-boton .btn{flex:none}
.errt svg{flex:none;margin-top:1px}
.lbl-row.col2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lbl-row.col2>*{min-width:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:14px;line-height:20px;font-weight:600;margin-bottom:4px}

/* botones: <button> y <a> con la apariencia de .btn */
button.btn,a.btn{font-family:'Inter',sans-serif;cursor:pointer;text-decoration:none;width:100%}
a.btn.link,button.btn.link{width:auto;justify-content:center}
button.btn.dis,button.btn:disabled{cursor:not-allowed}
.btn.fit{width:max-content}
.btns.fila{display:flex;flex-wrap:wrap;gap:8px}
.btns.fila .btn{width:auto;flex:1 1 auto}
form.en-linea{display:inline}

/* chips = <label> con un radio o casilla dentro */
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip:has(input:checked){border-color:var(--negro);background:var(--rosa);font-weight:600}
.chip:has(input:checked)::before{content:"✓";font-weight:600}
.chip:has(input:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}
.chip:has(input:disabled){background:var(--nube);border-style:dashed;color:var(--texto-2);cursor:not-allowed}
a.chip{text-decoration:none;color:var(--negro)}
a.chip[aria-current=true]{border-color:var(--negro);background:var(--rosa);font-weight:600}
a.fchip{text-decoration:none;color:var(--negro)}

/* interruptor: casilla real con la apariencia de .tgl */
.tgl{cursor:pointer;position:relative}
.tgl input{position:absolute;opacity:0;width:52px;height:44px;margin:0;left:0}
.tgl input:checked~i{background:var(--rosa)}
.tgl input:checked~i::after{left:23px}
.tgl input:focus-visible~i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}
.tgl .si,.tgl .no{display:none}.tgl input:checked~.si{display:inline}.tgl input:not(:checked)~.no{display:inline}

/* listas: filas que son enlaces */
a.item{text-decoration:none;color:inherit;display:grid}
a.item.av{display:grid}
a.item.tap{display:flex}
.list .item.anulado b,.list .item.anulado .num{text-decoration:line-through;color:var(--texto-2)}
.list .item b{overflow-wrap:anywhere}
del.annul{text-decoration:line-through}

/* pestañas y segmentados con enlaces */
.tabs a,.seg a{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:500;padding:4px 8px;line-height:1.2;color:var(--texto-2);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1.5px}
.tabs a[aria-current=page]{color:var(--negro);font-weight:600;border-bottom-color:var(--dorado);background:var(--nube)}
.seg a{color:var(--negro);border-left:1.5px solid var(--negro);margin:0;border-bottom:0}
.seg a:first-child{border-left:0}
.seg a[aria-current=true]{background:var(--rosa);font-weight:600}

/* aviso emergente: fijo sobre la barra inferior; se retira solo (no necesita JavaScript) */
.toast{position:fixed;left:12px;right:12px;bottom:84px;max-width:560px;margin:0 auto;z-index:40;animation:toast-fuera .3s ease 8s forwards}
@keyframes toast-fuera{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.toast svg{flex:none}
.toast a{color:var(--rosa);font-weight:600}
.avisos{display:flex;flex-direction:column;gap:8px}

/* tablas */
.scroll{overflow-x:auto;max-width:100%}
table.t th a{color:inherit;text-decoration:none}
.sticky-pie{position:sticky;bottom:62px;background:#fff;border-top:1px solid var(--borde);margin:0 -16px;padding:10px 16px;z-index:10}
.pagina{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pagina .btn{width:auto}

/* detalles que el prototipo resuelve con marcos */
.hoja-pagina{border:2px solid var(--negro);border-radius:var(--r-hoja);padding:16px;background:#fff;display:flex;flex-direction:column;gap:12px}
.dlg-pagina{max-width:460px;margin:8px auto 0;width:100%}
.separador{border:0;border-top:1px solid var(--borde);margin:4px 0}
.cifra-grande{font-family:'Poppins',sans-serif;font-weight:600;font-size:28px;line-height:34px;font-variant-numeric:tabular-nums}
.pc .hd a{text-decoration:none}
.chips.una-linea{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.kv dt{color:var(--texto-2)}.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.bn a{font-weight:600}

/* tableta */
@media (min-width:600px) and (max-width:1023px){
 .g2m{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app-main>.body{padding-left:24px;padding-right:24px}
}

/* escritorio: barra lateral fija y contenido ancho */
@media (min-width:1024px){
 .app{display:grid;grid-template-columns:232px minmax(0,1fr)}
 .side{display:flex;position:sticky;top:0;height:100vh;overflow-y:auto}
 .side a.it{text-decoration:none;color:var(--negro)}
 .side .it{padding-top:6px;padding-bottom:6px;line-height:1.25}
 .side .it svg{flex:none}
 .nav{display:none}
 .app-main>.body{max-width:1200px;padding:20px 24px 40px}
 .app-main>.appbar{padding:12px 24px;min-height:64px}
 .appbar .t{font-size:22px;line-height:30px}
 .appbar .back-link{margin-left:0}
 .toast{bottom:24px}
 .sticky-pie{bottom:0;margin:0}
 .g3m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .g4m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media (max-width:1023px){.g3m,.g4m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* impresion (balance, liquidacion): hoja A4 en blanco y negro, sin menus ni fondos */
@media print{
 .side,.nav,.appbar,.toast,.no-imprimir,.skip{display:none!important}
 body,.app-main>.body{background:#fff;color:#000}
 .app{display:block}.app-main>.body{max-width:none;padding:0}
 .kpi,.card,.tot,.prev{box-shadow:none;border-color:#999}
 a{text-decoration:none}
 .solo-imprimir{display:block!important}
}
.solo-imprimir{display:none}


/* ------------------------------------------------------------------------------------------------
   Estados de uso: pasar el raton, pulsar y foco. Los .hov/.prs/.foc de chicrose.css son muestras del prototipo.
   Ningun estado depende solo del color: el hover agrega una linea inferior (sombra) o subrayado; lo pulsado
   baja 1 px; el foco es el anillo doble; lo deshabilitado no reacciona (cursor not-allowed, borde punteado).
   -------------------------------------------------------------------------------------------------- */
.btn,.chip,.ibtn,.item.tap,.item.av,.side .it,.nav .n,.nav .plus,.seg a,.me,summary{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
 .btn,.chip,.ibtn,.item.tap,.item.av,.side .it,.nav .n,.me{transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
}
@media (hover:hover){
 /* botones */
 .btn:not(.dis):not(:disabled):not([aria-disabled=true]):hover{background:var(--nube);box-shadow:0 2px 0 var(--negro)}
 .btn.pri:not(.dis):not(:disabled):not([aria-disabled=true]):hover{background:var(--rosa-hover);border-color:var(--rosa-hover);box-shadow:0 2px 0 var(--negro)}
 .btn.out:not(.dis):not(:disabled):hover{border-color:var(--negro)}
 .btn.dng:not(.dis):not(:disabled):hover{background:var(--err-bg);box-shadow:0 2px 0 var(--err)}
 .btn.dngf:not(.dis):not(:disabled):hover{background:#7F1220;border-color:#7F1220;box-shadow:0 2px 0 var(--negro)}
 .btn.link:not(.dis):not(:disabled):hover{background:var(--nube);box-shadow:none;text-decoration-thickness:3px}
 /* chips (los marcados conservan el rosa; todos ganan borde negro) */
 .chip:not(.dis):not(.lock):not(:has(input:disabled)):hover{border-color:var(--negro);background:var(--nube);box-shadow:0 2px 0 var(--negro)}
 .chip.sel:not(.dis):hover,.chip:has(input:checked):hover{background:var(--rosa-hover);border-color:var(--negro);box-shadow:0 2px 0 var(--negro)}
 .seg a:hover{background:var(--nube);text-decoration:underline}
 .seg a[aria-current=true]:hover{background:var(--rosa-hover);text-decoration:underline}
 /* iconos, avatar y filas de menu */
 .ibtn:hover,.me:hover{background:var(--nube);box-shadow:0 0 0 2px var(--negro)}
 .side a.it:hover{background:var(--nube);border-left-color:var(--rosa-borde);text-decoration:underline}
 .side a.it.on:hover{border-left-color:var(--dorado)}
 .nav a.n:hover,.nav a.plus:hover{background:var(--nube);text-decoration:underline;box-shadow:inset 0 3px 0 var(--rosa-borde)}
 .nav a.n.on:hover{box-shadow:none}
 /* filas de lista y tarjetas que se pueden abrir */
 a.item:hover{background:var(--nube);box-shadow:inset 3px 0 0 var(--rosa-borde)}
 a.item:hover b{text-decoration:underline}
 a.kpi:hover,a.card:hover{background:var(--nube);box-shadow:0 2px 0 var(--negro)}
 summary:hover{background:var(--nube);text-decoration:underline}
 .toast a:hover,.field .x:hover,.bn a:hover,table.t th a:hover{text-decoration:underline}
 .field .x:hover{background:var(--nube);text-decoration:underline}
}
/* pulsado */
.btn:not(.dis):not(:disabled):not([aria-disabled=true]):active{background:var(--borde);box-shadow:inset 0 2px 0 rgba(23,19,21,.35);transform:translateY(1px)}
.btn.pri:not(.dis):not(:disabled):not([aria-disabled=true]):active{background:var(--rosa-2);border-color:var(--rosa-2);box-shadow:inset 0 2px 0 rgba(23,19,21,.35)}
.btn.dng:not(.dis):not(:disabled):active{background:var(--err-bg);box-shadow:inset 0 2px 0 var(--err)}
.btn.dngf:not(.dis):not(:disabled):active{background:#5E0D18;border-color:#5E0D18}
.btn.link:not(.dis):not(:disabled):active{background:var(--borde);transform:none;box-shadow:none}
.chip:not(.dis):not(.lock):not(:has(input:disabled)):active{background:var(--rosa-2);border-color:var(--negro)}
.ibtn:active,.me:active{background:var(--borde)}
.side a.it:active,.nav a.n:active,.nav a.plus:active,a.item:active,summary:active{background:var(--borde)}
/* foco: anillo del diseno; dentro de contenedores con desbordes recortados va por dentro */
.btn:focus-visible,.chip:focus-visible,.ibtn:focus-visible,.me:focus-visible,a.item:focus-visible,summary:focus-visible,.seg a:focus-visible{
 outline:2px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}
.side a.it:focus-visible,.nav a.n:focus-visible,.nav a.plus:focus-visible{outline:2px solid transparent;outline-offset:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--negro)}
a.item:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--negro)}
.btn.pri:focus-visible{border-color:var(--negro)}
@media (forced-colors:active){.btn:focus-visible,.chip:focus-visible,a.item:focus-visible{outline:2px solid CanvasText}}

/* areas tactiles de 44 px (A3): resumenes desplegables y el enlace «Cambiar» del campo Cliente */
summary{padding:10px 0;min-height:44px;box-sizing:border-box;cursor:pointer}
.field .x,.box .x{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;font-weight:600}
.me{position:relative}.me::after{content:"";position:absolute;inset:-4px}

/* dos columnas (contenido y panel lateral) solo en escritorio; en el celular, una sola (C1) */
.g2{display:block}
.g2>*+*{margin-top:12px}
@media (min-width:1024px){.g2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.g2>*+*{margin-top:0}}

/* grafica de barras con muchos tramos: nunca ensancha la pagina (C2) */
.chart-caja{overflow-x:auto;max-width:100%;padding-bottom:4px}
.chart-caja>.chart,.chart-caja>.chart-l{min-width:max-content}
.chart-caja .chart .b,.chart-caja .chart-l span{flex:1 0 36px}

/* M1: aire entre campos de un formulario (el diseño separa 12 px); M7: logo solo donde no hay panel lateral */
form>.field+.field,form>.field+.fset,form>.fset+.field,form>.field+.sw-row,form>.sw-row+.field{margin-top:12px}
.solo-escritorio{display:none}
@media (min-width:1024px){.solo-celular{display:none!important}.solo-escritorio{display:inline}}

/* Ingreso: el boton principal pasa del rosa palido a un rosa fuerte al pasar el raton (28-oct, a pedido del usuario).
   Hoy solo lo usa el boton de Ingresar (.btn-ingreso); la variable queda para reutilizarla en otros botones si se pide.
   Contraste del texto #171315: 5,39:1 sobre --rosa-fuerte y 4,66:1 sobre --rosa-fuerte-2 (UX/UI 1.2 lo fija en #D94F73, con borde negro de 1,5 px al pulsar) (AA: 4,5:1).
   Causa de que no se notara: no era otra plantilla ni otra hoja (el login carga las mismas que el resto); el hover
   existia pero iba de #EFA6B8 a #E8899F, una diferencia de contraste de 1,2:1 sobre fondo blanco. */
:root{--rosa-fuerte:#E0607F;--rosa-fuerte-2:#D94F73}
@media (hover:hover){
 .btn.pri.btn-ingreso:not(.dis):not(:disabled):not([aria-disabled=true]):hover{background:var(--rosa-fuerte);border-color:var(--rosa-fuerte);box-shadow:0 2px 0 var(--negro)}
}
.btn.pri.btn-ingreso:not(.dis):not(:disabled):not([aria-disabled=true]):active{background:var(--rosa-fuerte-2);border:1.5px solid var(--negro);box-shadow:inset 0 2px 0 rgba(23,19,21,.35)}

/* D-19: clientas por volver, contador del inicio y mensaje preescrito */
.vc{border:1px solid var(--borde);border-radius:var(--r-card);padding:12px 14px;background:#fff;box-shadow:var(--sombra-tarjeta);display:grid;gap:10px;min-width:0}
.vc.rec{background:var(--nube);box-shadow:none}
.vc.sinTel{border:1.5px dashed var(--aviso)}
.vc-top{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center}
.vc-top .tg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.vc-top b{overflow-wrap:anywhere}
.vc-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px;line-height:20px}
.vc-datos dt{color:var(--texto-2);font-size:13px}
.vc-datos dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.vc-acc{display:grid;gap:8px}
.vc-acc .btns{gap:8px}
.msg{border-left:4px solid var(--rosa);background:var(--nube);padding:10px 12px;border-radius:0 var(--r-campo) var(--r-campo) 0;font-size:14px;line-height:20px;overflow-wrap:anywhere}
.cnt{display:flex;align-items:center;gap:12px}
.cnt .n{font-family:'Poppins',sans-serif;font-weight:600;font-size:32px;line-height:36px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.cnt>div{min-width:0}
.chips.cnts .chip .num{font-weight:600}
.acts.col{flex-direction:column;align-items:flex-start;gap:6px}
.acts.col .btn{width:max-content;max-width:100%;white-space:nowrap}
table.t td .hint{white-space:normal}

/* el atributo hidden siempre oculta (los avisos .bn tienen display propio) */
[hidden]{display:none!important}

/* D-20: «Quién lo asume» con botones de radio reales dentro de la tarjeta .opt (la clase .sel del diseno se logra con :has) */
.opt{position:relative;cursor:pointer}
.opt:has(input:checked){border:2px solid var(--negro);background:var(--nube)}
.opt:has(input:checked) .rd{background:var(--rosa);box-shadow:inset 0 0 0 3px #fff}
.opt:has(input:focus-visible){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--negro)}
.opt .oh input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
button.chip{font:inherit;color:inherit;background:#fff}
button.chip.sel{border-color:var(--negro);background:var(--rosa);font-weight:600}
.totd[hidden],.chips[hidden]{display:none}