/* Reatiga Volks · Sistema de Punto de Venta */
:root {
    --teal: #5fc3c3; --teal-d: #3a9a9a; --teal-l: #e6f6f6;
    --rojo: #d90012; --rojo-d: #a8000e;
    --negro: #14161a; --gris: #f3f6f6; --texto: #1f2933; --suave: #6b7780;
    --verde: #0f8a3c; --borde: #dde5e5;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 'Segoe UI', Arial, sans-serif; color: var(--texto); background: var(--gris); }
a { color: inherit; }
h1 { font-size: 26px; margin: 0 0 20px; color: var(--negro); }
h2 { font-size: 20px; margin: 24px 0 12px; }
h3 { font-size: 16px; margin: 0 0 14px; color: var(--negro); }

/* ---------- Estructura ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 258px; flex: none; background: var(--negro); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 5px solid var(--teal); }
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; gap: 8px; margin-bottom: 22px; font-size: 13px; color: #cfd8d8; letter-spacing: .3px; }
.brand img { width: 110px; height: 110px; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { text-decoration: none; padding: 10px 14px; border-radius: 8px; color: #d6dede; transition: background .15s; }
.side nav a:hover { background: #262a31; color: #fff; }
.side nav a.on { background: var(--rojo); color: #fff; font-weight: 600; }
.user { margin-top: auto; padding: 14px; border-top: 1px solid #2b3037; font-size: 13px; color: #9aa6a6; display: flex; flex-direction: column; gap: 2px; }
.user strong { color: #fff; }
.user a { color: var(--teal); margin-top: 6px; text-decoration: none; }
.user a:hover { text-decoration: underline; }
.burger { display: none; }
.main { flex: 1; min-width: 0; padding: 28px 32px 48px; max-width: 1200px; }

/* ---------- Tarjetas de cifras ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 6px rgba(20,22,26,.07); border-top: 4px solid var(--borde); display: flex; flex-direction: column; gap: 4px; }
.card span { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); font-weight: 600; }
.card b { font-size: 24px; color: var(--negro); }
.card small { color: var(--suave); font-size: 12px; }
.card.verde-b { border-top-color: var(--verde); }
.card.rojo-b { border-top-color: var(--rojo); }
.card.azul-b { border-top-color: var(--teal-d); }
.card.destacada { background: var(--teal-l); border-top-color: var(--teal-d); }
.card.destacada b { color: var(--verde); }
.card.destacada.neg { background: #fdeaec; border-top-color: var(--rojo); }
.card.destacada.neg b { color: var(--rojo); }
.cards.chicas .card b { font-size: 21px; }

.nota { background: #fff; border-radius: 10px; padding: 12px 18px; margin-bottom: 20px; border-left: 4px solid var(--teal); font-size: 14px; }
.nota summary { cursor: pointer; font-weight: 600; }
.nota p { margin: 10px 0 0; }
.aviso-chico { color: var(--suave); font-size: 13px; }
.nota .aviso-chico { background: #fff8e1; color: #6b5200; padding: 8px 12px; border-radius: 6px; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 6px rgba(20,22,26,.07); margin-bottom: 18px; }
.dos .panel { margin-bottom: 0; }

.barra { display: grid; grid-template-columns: 130px 1fr 110px; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.pista { background: #eef1f1; border-radius: 6px; height: 14px; overflow: hidden; }
.pista i { display: block; height: 100%; background: var(--rojo); border-radius: 6px; }
.pista.teal i { background: var(--teal); }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(20,22,26,.07); }
.panel .tabla-wrap { box-shadow: none; border: 1px solid var(--borde); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: var(--negro); color: #fff; text-align: left; padding: 11px 14px; font-weight: 600; white-space: nowrap; }
td { padding: 10px 14px; border-top: 1px solid #edf1f1; }
tbody tr:nth-child(even) td { background: #f8fbfb; }
tbody tr:hover td { background: var(--teal-l); }
tfoot td { background: #f0f5f5; border-top: 2px solid var(--borde); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--verde); } .neg { color: var(--rojo); }
tr.liquidada td { color: #98a4a4; }
table.mini td { border: 0; padding: 7px 0; background: none !important; }
table.mini tr.sep td { border-top: 2px solid var(--borde); padding-top: 12px; }
.nohay { text-align: center; color: var(--suave); padding: 14px 0; }

/* ---------- Formularios ---------- */
.formulario, .filtros { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 6px rgba(20,22,26,.07); }
.formulario { max-width: 520px; }
.filtros { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 18px; }
.filtros label { margin: 0; }
label { display: block; font-size: 13px; font-weight: 600; color: #4a5560; margin: 0 0 5px; }
input[type=number], input[type=date], input[type=text], input[type=password], input[type=month], select {
    width: 100%; padding: 10px 12px; margin-bottom: 16px; border: 1.5px solid #cdd8d8; border-radius: 8px; font-size: 15px; background: #fbfdfd; }
.filtros input, .filtros select { margin-bottom: 0; width: auto; }
input:focus, select:focus { outline: none; border-color: var(--teal-d); box-shadow: 0 0 0 3px rgba(95,195,195,.3); }
label.check { display: flex; align-items: center; gap: 10px; background: var(--teal-l); padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; cursor: pointer; font-size: 14px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--rojo); margin: 0; }
.vista { background: #fff8e1; border-left: 4px solid #f0b400; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.vista[hidden] { display: none; }

button, .btn { display: inline-block; background: var(--rojo); color: #fff; font: 600 15px 'Segoe UI', Arial, sans-serif; border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer; text-decoration: none; transition: background .15s; }
button:hover, .btn:hover { background: var(--rojo-d); }
.btn.sec { background: var(--negro); }
.btn.sec:hover { background: #2b3037; }
.formulario button { width: 100%; margin-top: 4px; }
form.inline { display: inline; background: none; padding: 0; box-shadow: none; margin: 0; }
.btn-x { background: none; color: #b0b9b9; padding: 2px 8px; font-size: 14px; }
.btn-x:hover { background: var(--rojo); color: #fff; }

/* ---------- Avisos y pestañas ---------- */
.aviso { padding: 13px 18px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; }
.aviso.ok { background: #e3f6ea; color: #0b6a2e; border-left: 5px solid var(--verde); }
.aviso.error { background: #fdeaec; color: var(--rojo-d); border-left: 5px solid var(--rojo); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { text-decoration: none; padding: 9px 18px; border-radius: 8px; background: #fff; border: 1px solid var(--borde); font-weight: 600; font-size: 14px; }
.tabs a.on { background: var(--negro); color: #fff; border-color: var(--negro); }

/* ---------- Login ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(160deg, var(--teal) 0%, #2b8f8f 100%); padding: 20px; }
.login-box { background: #fff; border-radius: 16px; padding: 30px 32px 34px; width: 100%; max-width: 380px; box-shadow: 0 14px 40px rgba(0,0,0,.25); text-align: center; border-top: 6px solid var(--rojo); }
.login-box img { margin-bottom: 4px; }
.login-box h2 { font-size: 17px; margin: 0 0 22px; color: var(--negro); }
.login-box label { text-align: left; }
.login-box button { width: 100%; }
.error { color: var(--rojo-d); background: #fdeaec; padding: 8px 12px; border-radius: 6px; font-size: 14px; margin: 0 0 14px; }

/* ---------- Celular ---------- */
@media (max-width: 800px) {
    .app { flex-direction: column; }
    .side { width: 100%; height: auto; position: relative; flex-direction: column; padding: 10px 14px; border-right: 0; border-bottom: 5px solid var(--teal); }
    .brand { flex-direction: row; text-align: left; margin: 0; }
    .brand img { width: 52px; height: 52px; }
    .burger { display: block; position: absolute; right: 14px; top: 14px; background: #262a31; padding: 8px 14px; font-size: 20px; }
    .side nav, .side .user { display: none; }
    .side.open nav { display: flex; margin-top: 10px; }
    .side.open .user { display: flex; margin-top: 10px; }
    .main { padding: 18px 14px 40px; }
    .dos { grid-template-columns: 1fr; }
    .barra { grid-template-columns: 90px 1fr 92px; font-size: 13px; }
    h1 { font-size: 22px; }
}

/* ---------- Usuarios, roles, paginación ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #e3e8e8; color: #4a5560; }
.badge.admin { background: var(--rojo); color: #fff; }
.badge.contador { background: var(--teal); color: #0d3b3b; }
.badge.visor { background: #e3e8e8; color: #4a5560; }
.user .badge { align-self: flex-start; margin-top: 2px; }
.aviso.warn { background: #fff4d6; color: #6b5200; border-left: 5px solid #f0b400; }
.centro { text-align: center; } .gris { color: #b0b9b9; }
.acciones { white-space: nowrap; }
.acciones .btn, .acciones form { margin-right: 4px; }
.btn.chico { padding: 6px 12px; font-size: 13px; }
.fila { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.fila input { flex: 1; min-width: 160px; }
.formulario .fila button { width: auto; margin-top: 0; }
.formulario button.sec { background: var(--negro); }
.formulario.ancho { max-width: 640px; }
.dos-col { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

/* ---------- Paginador ---------- */
.pie-tabla { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(20,22,26,.07); }
.pie-tabla > span { color: var(--suave); font-size: 14px; }
.pie-tabla > span b { color: var(--negro); }
.pag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pag .pg { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #f3f6f6; color: var(--negro); text-decoration: none; font-weight: 600; font-size: 14px;
    font-variant-numeric: tabular-nums; border: 1px solid transparent; transition: background .15s, color .15s, transform .1s; }
.pag a.pg:hover { background: var(--teal-l); border-color: var(--teal); color: var(--teal-d); transform: translateY(-1px); }
.pag .pg.on { background: var(--rojo); color: #fff; box-shadow: 0 3px 10px rgba(217,0,18,.35); cursor: default; }
.pag .pg-flecha { font-size: 18px; line-height: 1; padding-bottom: 2px; }
.pag .pg.off { background: transparent; color: #c5cdcd; cursor: not-allowed; }
.pag .pt { color: #98a4a4; padding: 0 2px; font-weight: 700; letter-spacing: 1px; }
@media (max-width: 600px) {
    .pie-tabla { justify-content: center; text-align: center; }
    .pag { justify-content: center; gap: 4px; }
    .pag .pg { min-width: 34px; height: 34px; padding: 0 6px; }
}

.badge.socio { background: var(--teal); color: #0d3b3b; } /* alias antiguo */

/* ---------- Menú: grupo de configuración y Mi cuenta ---------- */
.side nav details.grupo { margin-top: 6px; border-top: 1px solid #2b3037; padding-top: 8px; }
.side nav details.grupo summary { list-style: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; color: #d6dede; position: relative; padding-right: 36px; user-select: none; }
.side nav details.grupo summary::-webkit-details-marker { display: none; }
.side nav details.grupo summary::after { content: '›'; position: absolute; right: 16px; top: 50%; margin-top: -13px; font-size: 20px; line-height: 26px; transition: transform .2s; color: var(--teal); }
.side nav details.grupo[open] summary::after { transform: rotate(90deg); }
.side nav details.grupo summary:hover { background: #262a31; color: #fff; }
.side nav details.grupo summary.sel { color: #fff; font-weight: 600; }
.side nav a.sub { display: block; white-space: nowrap; margin: 2px 0 0 12px; padding: 8px 14px; font-size: 14px; border-left: 2px solid #2b3037; border-radius: 0 8px 8px 0; }
.side nav a.sub.on { border-left-color: var(--rojo); }
.user a.micuenta { display: block; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #262a31; color: #fff; text-decoration: none; text-align: center; font-size: 14px; }
.user a.micuenta:hover, .user a.micuenta.on { background: var(--teal); color: #0d3b3b; text-decoration: none; }
.user a.salir { margin-top: 8px; text-align: center; }
.aviso-info { background: var(--teal-l); border-left: 4px solid var(--teal-d); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.vista-previa { background: #fff8e1; border-left: 4px solid #f0b400; padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; font-size: 14px; }
.vista-previa[hidden] { display: none; }
.card.teal-b { border-top-color: var(--teal); }

/* ---------- Origen de ingresos, acciones, gráficas ---------- */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.opcion { margin: 0; cursor: pointer; position: relative; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; text-align: center; padding: 14px 10px; border: 2px solid #cdd8d8; border-radius: 10px; font-weight: 600; font-size: 14px; background: #fbfdfd; transition: all .15s; }
.opcion:hover span { border-color: var(--teal-d); }
.opcion input:checked + span { border-color: var(--rojo); background: #fdeaec; color: var(--rojo-d); box-shadow: 0 0 0 3px rgba(217,0,18,.12); }
.og { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.og.daniel { background: var(--teal-l); color: #1d6f6f; } .og.internet { background: #14161a; color: #fff; } .og.sin { background: #fff4d6; color: #8a6100; }
.btn-e { display: inline-block; color: #98a4a4; text-decoration: none; padding: 2px 8px; border-radius: 6px; font-size: 15px; }
.btn-e:hover { background: var(--teal); color: #0d3b3b; }
.grafica { width: 100%; height: auto; display: block; }
.graficas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.graficas .panel.ancha { grid-column: 1 / -1; }
.graficas .panel { margin-bottom: 0; }
.alerta-dup { background: #fff4d6; border-left: 5px solid #f0b400; padding: 12px 18px; border-radius: 10px; margin-bottom: 18px; }
.alerta-dup a { font-weight: 700; }
.acc { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #e3e8e8; color: #4a5560; }
.acc.alta { background: #e3f6ea; color: #0b6a2e; } .acc.baja { background: #fdeaec; color: var(--rojo-d); } .acc.edicion { background: #fff4d6; color: #8a6100; }
.acc.cierre, .acc.reapertura { background: #14161a; color: #fff; } .acc.resumen { background: var(--teal-l); color: #1d6f6f; }
.cerrado { color: var(--verde); font-weight: 700; }
code.cmd { display: block; background: #14161a; color: #cfeaea; padding: 10px 14px; border-radius: 8px; font-size: 13px; overflow-x: auto; margin: 6px 0 12px; white-space: nowrap; }
@media (max-width: 800px) { .graficas { grid-template-columns: 1fr; } }

/* ---------- Posibles duplicados ---------- */
tbody tr.dup td { background: #fff4d6 !important; }
tbody tr.dup td:first-child { box-shadow: inset 4px 0 0 #f0b400; }
.tag-dup { display: inline-block; background: #f0b400; color: #3d2e00; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 6px; white-space: nowrap; }

.retenido { margin: 14px 0 6px; }
.retenido .ayuda { font-size: 13px; color: #555; margin: 0 0 10px; }

/* Roles del punto de venta */
.badge.manager { background: var(--negro); color: var(--teal); }
.badge.cajero { background: var(--teal-l); color: var(--teal-d); }
/* Tarjetas de módulos */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.modulo { background: #fff; border-radius: 12px; padding: 16px 18px; border-top: 4px solid var(--borde); box-shadow: 0 1px 3px rgba(20,22,26,.08); }
.modulo.listo { border-top-color: var(--verde); }
.modulo b { display: block; font-size: 15px; margin-bottom: 4px; }
.modulo small { color: var(--suave); display: block; }
.modulo .estado { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: #e3e8e8; color: #4a5560; }
.modulo.listo .estado { background: #dff3e6; color: var(--verde); }
.depto { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; margin-right: 4px; }
.depto.refacciones { background: #e3e8e8; color: #4a5560; }
.depto.accesorios { background: var(--teal-l); color: var(--teal-d); }