/* ============================================================
   Control de Cobros CFE — estilos
   Mobile-first · responsivo · identidad "medidor digital"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
    --ink:        #0F1A14;   /* casi negro verdoso */
    --verde:      #079455;   /* primario */
    --verde-osc:  #057043;
    --ambar:      #F5B700;   /* acento energía */
    --fondo:      #EEF3EF;
    --superficie: #FFFFFF;
    --linea:      #DCE5DF;
    --muted:      #5B6B61;
    --rojo:       #C0392B;
    --radio:      14px;
    --sombra:     0 1px 2px rgba(15,26,20,.05), 0 8px 24px rgba(15,26,20,.06);
}

*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.oculto{ display: none !important; }
.der{ text-align: right; }
.texto-centro{ text-align: center; }
.texto-apoyo{ color: var(--muted); font-size: .9rem; }

/* ---------- Pantallas centradas (login / instalar) ---------- */
.pantalla-centro{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(7,148,85,.10), transparent 60%),
        var(--fondo);
}
.tarjeta-acceso{
    width: 100%;
    max-width: 380px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: var(--sombra);
}

/* ---------- Marca ---------- */
.marca{ display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.marca-rayo{
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    font-size: 22px;
    background: var(--ink); color: var(--ambar);
    border-radius: 12px;
}
.marca-titulo{ margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.marca-sub{ margin: 2px 0 0; color: var(--muted); font-size: .82rem; }

/* ---------- Formularios ---------- */
.formulario{ display: grid; gap: 14px; margin-top: 4px; }
.campo{ display: grid; gap: 6px; }
.campo > span{ font-size: .8rem; font-weight: 600; color: var(--muted); }
.campo input, .campo select{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
.campo input:focus, .campo select:focus{
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(7,148,85,.16);
}

/* ---------- Botones ---------- */
.boton{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    transition: transform .04s ease, background .15s ease, border-color .15s ease;
    text-decoration: none;
}
.boton:active{ transform: translateY(1px); }
.boton-primario{ background: var(--verde); color: #fff; }
.boton-primario:hover{ background: var(--verde-osc); }
.boton-secundario{ background: #fff; color: var(--ink); border-color: var(--linea); }
.boton-secundario:hover{ border-color: #c4d2c8; }
.boton-ancho{ width: 100%; }
.boton-grande{ padding: 16px 20px; font-size: 1.05rem; }
.boton-mini{
    padding: 6px 10px; font: inherit; font-size: .78rem; font-weight: 600;
    background: #fff; border: 1px solid var(--linea); border-radius: 8px; cursor: pointer;
}
.boton-mini:hover{ border-color: #c4d2c8; }
.icono-cam{ font-size: 1.15em; }

/* ---------- Avisos ---------- */
.aviso{ padding: 12px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 14px; }
.aviso-ok{ background: #E7F6EE; color: var(--verde-osc); border: 1px solid #BFE6CF; }
.aviso-error{ background: #FBEAE8; color: var(--rojo); border: 1px solid #F0C5BF; }
.aviso code{ background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; }

/* ---------- Barra superior ---------- */
.barra{
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--ink); color: #fff;
}
.barra-marca{ font-weight: 700; display: flex; align-items: center; gap: 8px; }
.barra-marca .marca-rayo{ width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
.barra-nav{ display: flex; gap: 4px; flex: 1; }
.barra-link{
    color: #c9d6cd; text-decoration: none; font-weight: 600; font-size: .9rem;
    padding: 7px 12px; border-radius: 8px;
}
.barra-link:hover{ background: rgba(255,255,255,.08); color: #fff; }
.barra-link.activo{ background: rgba(7,148,85,.35); color: #fff; }
.barra-usuario{ display: flex; align-items: center; gap: 10px; }
.usuario-nombre{ font-size: .85rem; color: #c9d6cd; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-link.salir{ background: rgba(255,255,255,.08); }

/* ---------- Contenido ---------- */
.contenido{ max-width: 880px; margin: 0 auto; padding: 18px 16px 60px; display: grid; gap: 18px; }

.panel{
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 18px;
    box-shadow: var(--sombra);
}
.panel-titulo{ margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Acciones de escaneo ---------- */
.acciones-escaneo{ display: grid; gap: 10px; }
@media (min-width: 520px){
    .acciones-escaneo{ grid-template-columns: 2fr 1fr; }
}

/* ---------- Visor de cámara ---------- */
.visor-wrap{ margin-top: 14px; display: grid; gap: 10px; justify-items: center; }
.reader{ width: 100%; max-width: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); }
.visor-ayuda{ color: var(--muted); font-size: .85rem; margin: 0; text-align: center; }

/* ---------- Medidor (confirmación) — elemento distintivo ---------- */
.medidor{
    margin-top: 16px;
    background: var(--ink);
    border-radius: 16px;
    padding: 18px;
    display: grid; gap: 14px;
    color: #eaf2ec;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.medidor-etiqueta{
    display: block;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: #8fa79a; font-weight: 600; margin-bottom: 5px;
}
.medidor-fila input,
.medidor-mini{
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: #fff;
    padding: 11px 12px;
    font: inherit;
}
.medidor-valor{ font-size: 1.05rem; letter-spacing: .04em; }
.medidor-fila input:focus,
.medidor-mini:focus{ outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(7,148,85,.25); }
.medidor-mini.estatico{ display: flex; align-items: center; color: #cfe0d6; background: rgba(255,255,255,.03); }

.medidor-fila-doble{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* lectura del importe, estilo display */
.medidor-importe{
    background: #07110C;
    border: 1px solid rgba(245,183,0,.25);
    border-radius: 12px;
    padding: 14px 16px;
}
.importe-linea{ display: flex; align-items: baseline; gap: 6px; }
.importe-signo{ color: var(--ambar); font-size: 1.6rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.importe-input{
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--ambar);
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    letter-spacing: .01em;
}
.importe-input::placeholder{ color: rgba(245,183,0,.35); }

.medidor-acciones{ display: grid; gap: 10px; }
@media (min-width: 520px){
    .medidor-acciones{ grid-template-columns: 2fr 1fr; }
}

/* ---------- Resumen ---------- */
.resumen{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.resumen-tarjeta{
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px;
    display: grid; gap: 4px;
    box-shadow: var(--sombra);
}
.resumen-tarjeta-total{ background: linear-gradient(180deg, #fff, #F6FBF7); border-color: #C9E6D6; }
.resumen-etiqueta{ font-size: .78rem; color: var(--muted); font-weight: 600; }
.resumen-num{ font-size: 1.9rem; font-weight: 700; line-height: 1; }
.resumen-monto{ font-size: 1.05rem; color: var(--verde-osc); font-weight: 700; }

/* ---------- Tablas ---------- */
.tabla-wrap{ overflow-x: auto; }
.tabla{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th{
    text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}
.tabla td{ padding: 11px 10px; border-bottom: 1px solid #EEF2EF; white-space: nowrap; }
.tabla tr:last-child td{ border-bottom: none; }
.tabla .vacio td{ text-align: center; color: var(--muted); padding: 22px 10px; white-space: normal; }
.fila-inactiva{ opacity: .5; }

/* ---------- Filtros ---------- */
.filtros{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtros .campo{ min-width: 140px; }

/* ---------- Chips / misc ---------- */
.chip{ font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.chip-on{ background: #E7F6EE; color: var(--verde-osc); }
.chip-off{ background: #F1EDED; color: var(--muted); }
.acciones-celda{ display: flex; gap: 6px; flex-wrap: wrap; }
.en-linea{ display: inline; margin: 0; }

@media (max-width: 480px){
    .barra-usuario .usuario-nombre{ display: none; }
    .importe-input{ font-size: 2rem; }
}

/* ---------- Corte de caja ---------- */
.corte-resumen{
    display: flex; flex-wrap: wrap; gap: 24px;
    padding: 14px 0 6px;
}
.corte-resumen > div{ display: grid; gap: 4px; }
.importe-corte{ font-size: 1.7rem; }

/* ---------- Ticket imprimible ---------- */
.fondo-ticket{ background: #E7ECE8; padding: 20px 12px 60px; }
.ticket-acciones{
    display: flex; gap: 10px; justify-content: center;
    max-width: 340px; margin: 0 auto 16px;
}
.ticket-acciones .boton{ flex: 1; }
.ticket{
    width: 100%; max-width: 340px; margin: 0 auto;
    background: #fff; color: #111;
    border: 1px solid var(--linea); border-radius: 10px;
    padding: 18px 18px 22px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px; line-height: 1.5;
    box-shadow: var(--sombra);
}
.ticket-cab{ text-align: center; margin-bottom: 12px; }
.ticket-negocio{ font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.ticket-sub{ text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #555; margin-top: 2px; }
.ticket-lineas > div{ display: flex; justify-content: space-between; gap: 10px; }
.ticket-lineas span{ color: #666; }
.ticket-lineas b{ text-align: right; font-weight: 700; }
.ticket-sep{ border-top: 1px dashed #999; margin: 10px 0; }
.ticket-titulo{ text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: #555; margin-bottom: 6px; }
.ticket-row{ display: flex; justify-content: space-between; gap: 10px; }
.ticket-grandtotal{ font-size: 16px; font-weight: 700; margin-top: 4px; }
.ticket-detalle{ width: 100%; border-collapse: collapse; }
.ticket-detalle td{ padding: 2px 0; vertical-align: top; }
.ticket-detalle td:nth-child(2){ padding: 2px 6px; color: #444; }
.ticket-firma{ margin-top: 26px; text-align: center; }
.firma-linea{ border-top: 1px solid #111; width: 70%; margin: 0 auto 4px; }
.ticket-firma span{ font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: .1em; }
.ticket-pie{ text-align: center; margin-top: 14px; font-size: 10px; color: #888; }

@media print{
    .no-print{ display: none !important; }
    body.fondo-ticket{ background: #fff; padding: 0; }
    .ticket{ border: none; box-shadow: none; max-width: 80mm; margin: 0; padding: 4mm; }
}