/* =====================================================
   EazyPOS v1.9.0 — panel principal
   Concepto: terminal de punto de venta físico. Teclas de función
   (F1/F2...) como en un teclado de caja registradora, datos en
   monoespaciada como un ticket, reloj en vivo.
   ===================================================== */

:root {
    --ink:        #11141C;
    --panel:      #181C27;
    --panel-hi:   #212632;
    --line:       #2C3242;
    --text:       #E7EAF2;
    --text-dim:   #939CB0;
    --text-faint: #626B80;
    --accent:     #5EEAD4;
    --accent-ink: #06201C;
    --warn:       #FBBF24;

    --f-display: 'Space Grotesk', sans-serif;
    --f-body:    'Inter', sans-serif;
    --f-mono:    'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ink);
    background-image: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(94,234,212,0.06), transparent);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 30px; /* deja hueco para el footer fijo, evita que tape contenido */
}

.term {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Barra superior ---------- */

.term-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--ink) 100%);
    position: sticky;
    top: 0;
    z-index: 100;
}

.term-top__brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.term-top__logo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--text);
}
.term-top__logo span { color: var(--accent); }

.term-top__tag {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 2px 6px;
}

.term-top__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.term-clock {
    font-family: var(--f-mono);
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 0.04em;
    min-width: 72px;
    text-align: right;
}

.term-clock-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 4px;
    border-right: 1px solid var(--line);
    margin-right: 2px;
}

.term-clock-date {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.term-user {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--text-dim);
}
.term-user__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}
.term-user em {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--text-faint);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 2px;
}

.term-logout {
    color: var(--text-faint);
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.term-logout:hover { color: var(--warn); background: var(--panel-hi); }

/* ---------- Footer fijo (poco espacio, en todas las páginas) ---------- */

.term-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 6px 16px;
    text-align: center;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    background: var(--panel);
    border-top: 1px solid var(--line);
}
.term-footer strong {
    color: var(--accent);
    font-weight: 700;
}

/* ---------- Contenido principal ---------- */

.term-main {
    flex: 1;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 22px 28px 40px;
}

.welcome-panel {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 18px;
    min-height: 58px;
    padding: 10px 22px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 14px;
    background: linear-gradient(180deg, rgba(26,31,43,0.96), rgba(20,25,36,0.96));
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.025);
}

.term-greet {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    text-align: center;
    margin: 0;
}

.term-greet__saludo {
    margin: 0;
    font-family: var(--f-display);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.term-greet__name {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--accent);
    text-shadow: 0 0 24px rgba(94,234,212,0.08);
    white-space: nowrap;
}

.account-status {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.account-status:hover {
    border-color: var(--line);
    background: transparent;
    transform: none;
}

.account-status__state {
    font-family: var(--f-mono);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
    white-space: nowrap;
}

.account-status__expiry {
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---------- Estadísticas tipo ticket ---------- */

.term-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
}
.term-stats--top { margin-bottom: 18px; }

.stat {
    background: var(--panel);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
a.stat { cursor: pointer; transition: background 0.15s ease; }
a.stat:hover { background: var(--panel-hi); }

.stat__label {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 700;
}

.stat__value {
    font-family: var(--f-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
}
.stat__value--sm { font-size: 20px; }
.stat__value--muted { color: var(--text-faint); }

.stat__unit {
    font-size: 13px;
    color: var(--text-dim);
}

.term-stats__titulo {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 700;
    margin: 0 0 10px 2px;
}
.term-stats--ingresos .stat__value--money {
    font-size: 22px;
    color: var(--accent);
}
.term-stats--ingresos { grid-template-columns: repeat(4, 1fr); }
.stat--beneficio { background: rgba(94,234,212,0.06); }
.stat--beneficio .stat__value--money { color: var(--accent); }
.stat--beneficio.stat--negativo .stat__value--money { color: #F87171; }
.stat--negativo:not(.stat--beneficio) { background: rgba(248,113,113,0.06); }
.stat--negativo:not(.stat--beneficio) .stat__value--money { color: #F87171; }

/* ---------- Teclas de función ---------- */

.keys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.key {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 18px 16px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px -14px rgba(0,0,0,0.6);
}

.key:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 24px -12px rgba(94,234,212,0.25);
}

.key:active { transform: translateY(0); }

.key__code {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.06em;
    position: absolute;
    top: 12px;
    right: 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
}

.key__icon {
    font-size: 26px;
    color: var(--accent);
    line-height: 1;
}

.key__label {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 19px;
}

.key__hint {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-faint);
}

.key--soon {
    opacity: 0.45;
    cursor: default;
}
.key--soon:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px -14px rgba(0,0,0,0.6);
}
.key--soon .key__icon,
.key--soon .key__code { color: var(--text-faint); }

.term-footline {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.term-lang { position:relative; font-family:var(--f-mono); }
.term-lang__button { background:var(--ink); border:1px solid var(--line); color:var(--text-dim); border-radius:7px; padding:7px 10px; cursor:pointer; font:inherit; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.term-lang__button:hover { color:var(--text); border-color:var(--text-faint); }
.term-lang__menu { display:none; position:absolute; right:0; top:calc(100% + 7px); min-width:145px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:5px; z-index:1000; box-shadow:0 15px 35px rgba(0,0,0,.35); }
.term-lang__menu.is-open { display:block; }
.term-lang__menu a { display:flex; align-items:center; gap:8px; padding:8px 10px; color:var(--text-dim); text-decoration:none; border-radius:6px; }
.term-lang__flag { width:16px; height:11px; object-fit:cover; border-radius:2px; display:inline-block; vertical-align:middle; box-shadow:0 0 0 1px rgba(255,255,255,.15); flex:0 0 auto; }
.term-lang__menu a:hover, .term-lang__menu a.activo { background:var(--panel-hi); color:var(--text); }
.term-user em { font-style:normal; color:var(--text-faint); margin-left:6px; font-size:10px; }

.term-idiomas {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
    font-family: var(--f-mono);
    font-size: 12px;
}
.term-idiomas a { color: var(--text-faint); text-decoration: none; }
.term-idiomas a:hover { color: var(--text-dim); }
.term-idiomas a.activo { color: var(--accent); font-weight: 600; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .term-stats--ingresos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .term-top { padding: 14px 18px; }
    .term-main { padding: 32px 18px 30px; }
    .welcome-panel {
        margin-bottom: 22px;
        min-height: 0;
        padding: 6px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .term-greet { gap: 7px; }
    .term-greet__saludo { font-size: 19px; }
    .term-greet__name { font-size: 23px; }
    .account-status {
        border-left: 1px solid var(--line);
        flex-wrap: wrap;
        padding: 0 0 0 10px;
        gap: 7px;
        white-space: normal;
    }
    .account-status__state { font-size: 18px; }
    .account-status__expiry { font-size: 13px; }
    .account-status__state,
    .account-status__expiry { white-space: normal; }

    .term-stats { grid-template-columns: 1fr; }
    .term-user span:not(.term-user__dot) { display: none; }
    .term-clock-date { display: none; }
    .term-clock-wrap { border-right: none; padding-right: 0; margin-right: 0; }
}

/* Respeta la preferencia de movimiento reducido del sistema */
@media (prefers-reduced-motion: reduce) {
    .key { transition: none; }
}

/* El footer de marca no debe salir nunca en tickets/etiquetas impresas */
@media print {
    .term-footer { display: none !important; }
}

/* Foco visible por teclado, accesibilidad */
.key:focus-visible,
.term-logout:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =====================================================
   Componentes compartidos por el resto de páginas
   (login, sync.php, buscar.php, setup.php...) para que
   todo el POS use la misma paleta que el panel principal.
   ===================================================== */

.wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 24px 48px;
    width: 100%;
}
.wrap--narrow { max-width: 1320px; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px -14px rgba(0,0,0,0.6);
}

.card h1, .card h2 {
    font-family: var(--f-display);
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text);
}
.card h1 { font-size: 22px; }
.card h2 { font-size: 16px; }

.card p { color: var(--text-dim); }

.badge {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 12px;
    background: var(--panel-hi);
    color: var(--accent);
    border: 1px solid var(--line);
    padding: 2px 9px;
    border-radius: 20px;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-dark {
    background: var(--panel-hi);
    color: var(--text);
    border: 1px solid var(--line);
}
.btn-dark:hover { border-color: var(--accent); }

/* Formularios */
label {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #e7eaf2;
    margin-bottom: 14px;
}

input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=tel],
input[type=number],
input[type=date] {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--f-body);
    font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(94,234,212,0.15);
}
input::placeholder { color: var(--text-faint); }

/* Mensajes de estado */
.msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    white-space: pre-wrap;
    font-family: var(--f-mono);
}
.msg-error { background: rgba(248,113,113,0.1); color: #F87171; border: 1px solid rgba(248,113,113,0.3); }
.msg-ok    { background: rgba(94,234,212,0.1); color: var(--accent); border: 1px solid rgba(94,234,212,0.3); }
.msg-warn  { background: rgba(251,191,36,0.1); color: var(--warn); border: 1px solid rgba(251,191,36,0.3); }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 500;
}
td { color: var(--text); }
td .muted { color: var(--text-dim); }

/* Página de login */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 62px 36px 40px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
}
.login-card__brand {
    text-align: center;
    margin-bottom: 28px;
}
.login-card__brand .logo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--text);
}
.login-card__brand .logo span { color: var(--accent); }
.login-card__brand .tag {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-top: 6px;
}
.login-card button[type=submit] { width: 100%; margin-top: 6px; padding: 13px; }

.login-card__idiomas {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    font-family: var(--f-mono);
    font-size: 12px;
}
.login-card__idiomas a { color: var(--text-faint); text-decoration: none; }
.login-card__idiomas a:hover { color: var(--text-dim); }
.login-card__idiomas a.activo { color: var(--accent); font-weight: 600; }

.login-card__aviso,
.login-card__aviso a {
    color: #e7eaf2;
    font-weight: 700;
}
.login-card__aviso a:hover { text-decoration: none; }

.login-card--ancho { max-width: 620px; }

.planes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 22px 0;
}
.plan {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 16px;
    text-align: center;
    background: var(--panel-hi);
}
.plan--destacado { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan__badge {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(94,234,212,0.1);
    border: 1px solid rgba(94,234,212,0.3);
    border-radius: 20px;
    padding: 2px 9px;
    margin-bottom: 10px;
}
.plan__nombre { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--text); }
.plan__precio { font-family: var(--f-mono); font-size: 28px; font-weight: 600; color: var(--text); margin: 8px 0 2px; }
.plan__precio span { font-size: 13px; color: var(--text-faint); font-weight: 400; }

.btn-whatsapp {
    background: #25D366;
    color: #05230f;
}
.btn-whatsapp:hover { filter: brightness(1.08); }
.login-lang-top {
    position:absolute;
    top:14px;
    right:14px;
    z-index:20;
    font-family:var(--f-mono);
    font-size:12px;
}
.login-lang-top details { position:relative; }
.login-lang-top summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:7px;
    min-height:32px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:6px 9px;
    color:var(--text-dim);
    background:var(--ink);
    white-space:nowrap;
    transition:border-color .15s, color .15s, background .15s;
}
.login-lang-top summary:hover,
.login-lang-top details[open] summary {
    border-color:rgba(94,234,212,.45);
    color:var(--text);
}
.login-lang-top summary::-webkit-details-marker { display:none; }
.login-lang-flag {
    width:18px;
    height:12px;
    flex:0 0 18px;
    display:block;
    object-fit:cover;
    border-radius:2px;
    border:1px solid rgba(255,255,255,.16);
}
.login-lang-arrow { color:var(--text-faint); margin-left:2px; font-size:11px; }
.login-lang-menu {
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    min-width:160px;
    padding:5px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:9px;
    z-index:50;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}
.login-lang-menu a {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    color:var(--text-dim);
    text-decoration:none;
    border-radius:6px;
    white-space:nowrap;
}
.login-lang-menu a:hover,
.login-lang-menu a.activo {
    background:var(--panel-hi);
    color:var(--text);
}
.login-lang-menu a.activo { color:var(--accent); font-weight:600; }
@media(max-width:430px){
    .login-card { padding-left:24px; padding-right:24px; }
    .login-lang-top { top:12px; right:12px; }
    .login-lang-top summary span:not(.login-lang-arrow) { max-width:72px; overflow:hidden; text-overflow:ellipsis; }
}


/* EazyPOS: aviso de mensajes nuevos en popup */
.easypos-message-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,9,15,.80);backdrop-filter:blur(5px);opacity:1;transition:opacity .14s ease}
.easypos-message-overlay.is-closing{opacity:0}.easypos-message-modal{position:relative;width:min(460px,100%);box-sizing:border-box;padding:30px 30px 26px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.58);text-align:center}
.easypos-message-modal--notice h2{margin:8px 0 10px;font-size:27px}
.easypos-message-modal--notice p{margin:0 auto;max-width:390px;color:var(--muted);line-height:1.6}
.easypos-message-modal__icon{font-size:34px;line-height:1}
.easypos-message-modal__close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}
.easypos-message-modal__close:hover{color:var(--text)}
.easypos-message-modal__actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.easypos-message-modal__actions .btn{min-width:190px;text-align:center}
@media(max-width:520px){.easypos-message-modal{padding:26px 20px 22px}.easypos-message-modal--notice h2{font-size:23px}}

/* v16 — Mejor legibilidad del enlace de recuperación en login */
.login-forgot-password {
    display: inline-block;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #5eead4 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.login-forgot-password:hover,
.login-forgot-password:focus-visible {
    color: #7ff2df !important;
}