*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-deep: #0d2620; --bg-pub: #14322b; --bg-card: #1c4036;
--bg-deeper: var(--bg-deeper); --bg-panel-head: var(--bg-panel-head); --bg-raised: var(--bg-raised); --bg-raised-hover: var(--bg-raised-hover);
--accent: #d4af37; --accent-soft: rgba(212,175,55,0.15);
--text: #f5e8d3; --text-muted: #9eb5a9; --text-subtle: #7f968c;
--error: #e76f51; --success: #76b39d; --warning: #f4a261;
--border: rgba(245,232,211,0.12); --border-strong: rgba(245,232,211,0.25);
}
/* KINGS: mismo diseño y mismo dorado, pero fondo negro grafito (como su logo)
para que se distinga de Spoons de un vistazo (Robert, 4-sep-2026). */
/* KINGS: misma oscuridad y mismos textos que Spoons (se leen igual), pero el verde
tira a azul petróleo para saber de un vistazo en qué local estás. */
/* Kings y Spoons comparten paleta verde + dorado (decisión final de Robert, 4-sep-2026,
tras probar carbón, azul, granate, claro, madera y negro). Solo cambian logo e icono. */
html, body { background: var(--bg-deep); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; overscroll-behavior-y: none; }
/* Fix scroll infinito en iOS Safari: html bloquea el rubber-band, body
es el scroll-container con altura de viewport dinámico. Cuando llega
al final del contenido, NO se puede scrollear más. */
html { height: 100%; overflow: hidden; }
body { height: 100dvh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* Cuando hay un modal abierto, JS añade .modal-open al body para bloquear
el scroll de la pagina detras. Mas fiable que :has() en todos los navegadores. */
body.modal-open {
overflow: hidden !important;
touch-action: none;
}
/* Barra de scroll personalizada — dorada y fina, en toda la app */
* {
scrollbar-width: thin;
scrollbar-color: rgba(212,175,55,0.35) transparent;
}
*::-webkit-scrollbar {
width: 8px; height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(212,175,55,0.30);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(212,175,55,0.55);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
body { background: radial-gradient(ellipse at top, rgba(212,175,55,0.06), transparent 55%), var(--bg-deep); background-attachment: fixed; }
* { box-sizing: border-box; }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.container { width: 100%; max-width: 460px; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border); border-radius: 20px; padding: 56px 44px 44px; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.08) inset; animation: fadeUp 0.6s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.brand { text-align: center; margin-bottom: 32px; }
.brand-mark { display: inline-block; width: 56px; height: 56px; border: 2px solid var(--accent); border-radius: 50%; position: relative; margin-bottom: 16px; }
.brand-mark::before { content: 'S'; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 32px; color: var(--accent); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); }
/* Cuando el local define un logo propio, se quita el borde y la "S"
y se pinta el logo de fondo. El logo ya tiene su propio sello/borde.
Tamaños mas grandes para que el sello se vea bien. */
.brand-mark.has-logo,
.app-header-brand-mark.has-logo {
border: none;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.brand-mark.has-logo {
width: 96px; height: 96px;
margin-bottom: 14px;
}
.app-header-brand-mark.has-logo {
width: 44px; height: 44px;
}
.brand-mark.has-logo::before,
.app-header-brand-mark.has-logo::before { content: none; }
/* Logos anchos (Kings: solo las letras doradas, sin sello redondo).
Misma altura visual que el sello de Spoons, sin recorte circular. */
.brand-mark.has-logo.logo-wide { width: 220px; height: 60px; border-radius: 0; margin-bottom: 18px; }
.app-header-brand-mark.has-logo.logo-wide { width: 118px; height: 32px; border-radius: 0; }
.brand-mark.has-logo.logo-wide + .brand-name { display: none; }
.brand-name { font-family: 'Cinzel', 'Playfair Display', serif; font-size: 36px; letter-spacing: 1.5px; color: var(--accent); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.brand-subtitle { font-size: 11px; color: var(--text-subtle); letter-spacing: 5px; text-transform: uppercase; margin-top: 10px; font-weight: 600; }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; }
.form-input, .form-select { width: 100%; padding: 14px 16px; background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 16px; transition: all 0.2s; }
.form-input::placeholder { color: var(--text-subtle); }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,0.35); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Permite que los hijos de form-row se encojan correctamente sin que un
input tipo time / number con ancho mínimo iOS rompa el layout. */
.form-row > .form-group { min-width: 0; }
.form-input[type="time"], .form-input[type="date"] {
min-width: 0;
width: 100%;
box-sizing: border-box;
}
/* Turno compacto: dos inputs time inline con separador → */
.time-range {
display: flex;
align-items: center;
gap: 10px;
}
.time-range .time-input {
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 12px 10px;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.time-range-sep {
color: var(--text-subtle);
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
opacity: 0.7;
}
/* Custom-styled dropdown to match dark theme */
.form-select {
color-scheme: dark;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px 14px;
padding-right: 38px;
cursor: pointer;
}
/* Themed option colors (works in most browsers) */
.form-select option {
background-color: var(--bg-card);
color: #f5e8d3;
padding: 10px;
}
.form-select option:disabled {
color: #6e857b;
}
.form-select optgroup {
background-color: var(--bg-pub);
color: #d4af37;
font-weight: 700;
font-style: normal;
letter-spacing: 0.5px;
}
/* Number inputs — quitar las flechitas blancas que rompen el tema */
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Date / time inputs — themed picker icon (gold + larger) */
input[type="date"], input[type="time"] {
color-scheme: dark;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
background: transparent url("data:image/svg+xml;utf8,") center / 22px no-repeat;
cursor: pointer;
width: 26px;
height: 26px;
padding: 0;
margin-right: 2px;
opacity: 1;
filter: none;
transition: transform 0.15s, opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
transform: scale(1.1);
}
.btn { width: 100%; padding: 15px; background: #c9aa41; color: var(--bg-deep); border: none; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; margin-top: 8px; }
.btn:hover:not(:disabled) { background: #d6b84f; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,175,55,0.25); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: rgba(245,232,211,0.05); color: var(--text); border-color: var(--text-muted); transform: none; box-shadow: none; }
.btn-large { padding: 22px; font-size: 15px; }
.btn-danger { background: var(--error); color: white; }
.btn-danger:hover:not(:disabled) { background: #d65a3c; box-shadow: 0 6px 20px rgba(231,111,81,0.3); }
.message { padding: 12px 16px; border-radius: 10px; margin-top: 16px; font-size: 14px; text-align: center; animation: fadeUp 0.3s ease; }
.message.error { background: rgba(231,111,81,0.15); color: var(--error); border: 1px solid rgba(231,111,81,0.3); }
.message.success { background: rgba(118,179,157,0.15); color: var(--success); border: 1px solid rgba(118,179,157,0.3); }
.message.warning { background: rgba(244,162,97,0.15); color: var(--warning); border: 1px solid rgba(244,162,97,0.3); }
.hidden { display: none !important; }
/* Password show/hide toggle */
.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: 44px; }
.password-toggle {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
background: transparent; border: none; cursor: pointer;
color: var(--text-subtle);
display: flex; align-items: center; justify-content: center;
border-radius: 8px; transition: all 0.15s;
}
.password-toggle:hover { color: var(--text); background: rgba(245,232,211,0.06); }
.password-toggle:focus { outline: none; color: var(--accent); }
.loading { text-align: center; padding: 24px 0; }
.spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--text-muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.init-screen { text-align: center; }
.init-screen h1 { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--text); margin-bottom: 12px; }
.init-screen p { color: var(--text-muted); margin-bottom: 24px; font-size: 15px; line-height: 1.5; }
.init-checklist { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin: 24px 0; text-align: left; }
.init-checklist-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.init-checklist-item + .init-checklist-item { border-top: 1px solid var(--border); }
.init-checklist-label { color: var(--text-muted); }
.init-checklist-count { color: var(--accent); font-weight: 700; font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.progress-bar { width: 100%; height: 6px; background: rgba(0,0,0,0.3); border-radius: 100px; overflow: hidden; margin: 16px 0 8px; }
.progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s ease; border-radius: 100px; }
.progress-text { font-size: 12px; color: var(--text-muted); text-align: center; letter-spacing: 1px; }
.app-shell {
max-width: 1000px;
margin: 0 auto;
/* padding-top respeta la safe area de iOS (status bar transparente
de PWA instalada) — evita que la hora del móvil se solape con el
header. En Android / navegador no-PWA, env() es 0 y queda 20px. */
padding: calc(20px + env(safe-area-inset-top)) 20px 20px;
animation: fadeUp 0.5s ease;
}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 20px; }
.app-header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.app-header-brand-mark { width: 36px; height: 36px; border: 1.5px solid var(--accent); border-radius: 50%; position: relative; flex-shrink: 0; }
.app-header-brand-mark::before { content: 'S'; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 20px; color: var(--accent); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); }
.app-header-brand-text { font-family: 'Cinzel', 'Playfair Display', serif; font-size: 20px; color: var(--accent); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.app-header-user { display: flex; align-items: center; gap: 12px; text-align: right; min-width: 0; flex-shrink: 1; }
.app-header-user-name { font-size: 14px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.app-header-user-role { font-size: 11px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; white-space: nowrap; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.15s; flex-shrink: 0; padding: 0; }
.icon-btn:hover { background: rgba(245,232,211,0.05); color: var(--text); border-color: var(--text-muted); }
/* === MOBILE RESPONSIVE — header compaction === */
@media (max-width: 720px) {
.app-shell { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
.app-header { padding: 12px 14px; gap: 10px; }
.app-header-brand-text { font-size: 18px; }
.app-header-user { gap: 8px; }
.app-header-user-name { max-width: 80px; font-size: 13px; }
.app-header-user-role { font-size: 10px; }
.icon-btn { width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 540px) {
.app-header-brand-text { display: none; }
.app-header-user > div:first-child { display: none; }
.app-header { padding: 10px 12px; gap: 6px; }
.app-header-user { gap: 6px; }
.icon-btn { width: 32px; height: 32px; font-size: 15px; }
}
@media (max-width: 380px) {
.app-shell { padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
.icon-btn { width: 30px; height: 30px; font-size: 14px; }
.app-header { padding: 8px 10px; }
}
@media (max-width: 540px) {
.panel { padding: 16px 14px; }
}
.panel { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 16px; max-width: 100%; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.panel-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--text); font-weight: 700; }
.panel-subtitle { font-size: 12px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 6px; }
/* Panel "Caja del dia" — version compacta para que las transacciones
sean el protagonista. Una linea con la fecha + badge, y debajo una
linea fina con apertura/encargado en formato inline. */
.panel.panel-caja {
padding: 10px 18px;
margin-bottom: 12px;
}
/* Header en una linea: [fecha · apertura · encargado] ──→ [estado a la derecha] */
.panel.panel-caja .panel-header {
margin-bottom: 0;
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap; justify-content: flex-start;
}
.panel.panel-caja .panel-title {
font-size: 17px;
letter-spacing: 0.2px;
flex: 0 0 auto;
}
.panel.panel-caja .caja-meta {
flex: 0 1 auto;
justify-content: flex-start;
}
.panel.panel-caja .panel-header > .badge {
margin-left: auto;
}
.caja-meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px 10px;
font-size: 12px;
color: var(--text-subtle);
}
.caja-meta-item {
display: inline-flex; align-items: baseline; gap: 6px;
background: none; border: none; padding: 0; border-radius: 0;
}
.caja-meta-label {
font-size: 10px; color: var(--text-subtle);
text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
margin-bottom: 0;
}
.caja-meta-value {
font-size: 13px; color: var(--text); font-weight: 600;
}
.caja-meta-value.accent { color: var(--accent); font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.caja-meta-sep {
color: var(--text-subtle); opacity: 0.6;
}
.badge { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-success { background: rgba(118,179,157,0.15); color: var(--success); }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-subtle); }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-text { font-size: 14px; line-height: 1.5; }
/* Botones de acción al final del contenido — flujo natural, sin flotante.
Patrón clásico GitHub/Asana: scrollea hasta abajo para añadir/cerrar.
Sin overlap ni problemas de transparencia. */
/* Toasts en móvil: abajo-centro estilo iOS. (La botonera se queda al
final de la página, como siempre — Robert prefirió el diseño original.) */
@media (max-width: 540px) {
.toast {
top: auto !important;
right: auto !important;
bottom: calc(84px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
max-width: 92vw;
text-align: center;
}
}
.action-buttons {
display: flex; gap: 12px;
justify-content: center;
margin-top: 20px;
}
.action-buttons .btn {
width: auto;
min-width: 240px;
margin-top: 0;
padding: 14px 28px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.9px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
/* Sombra exterior + inset highlight arriba (efecto "metal pulido") */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.15),
0 3px 8px rgba(0,0,0,0.30),
0 1px 2px rgba(0,0,0,0.18);
}
.action-buttons .btn .btn-text-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
font-size: 22px;
font-weight: 900;
line-height: 1;
font-family: Arial, sans-serif;
}
.action-buttons .btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
}
.action-buttons .btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition-duration: 0.08s;
}
/* Primary (Nueva transacción) — gradient dorado tipo "oro pulido" con
3 stops (claro arriba → dorado medio → ligeramente oscuro abajo).
Combinado con los inset highlights da efecto premium tipo lingote. */
.action-buttons .btn:not(.btn-secondary) {
background: linear-gradient(180deg, #f0d075 0%, #d4af37 55%, #b8932a 100%);
border: 1px solid #d4af37;
color: #2a1a0a;
}
.action-buttons .btn:not(.btn-secondary):hover:not(:disabled) {
background: linear-gradient(180deg, #f5d680 0%, #e2c155 55%, #c4a032 100%);
border-color: #e2c155;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 -1px 0 rgba(0,0,0,0.15),
0 6px 18px rgba(212,175,55,0.40),
0 2px 4px rgba(0,0,0,0.20);
}
@media (max-width: 540px) {
.action-buttons { flex-direction: column; gap: 10px; align-items: center; }
/* En lugar de ocupar todo el ancho, los botones quedan centrados con
un max-width razonable para que se vean como botones, no como barras. */
.action-buttons .btn { width: auto; min-width: 220px; max-width: 320px; padding: 13px 32px; }
}
/* Cerrar caja — gradient oscuro con tinte rojo + borde y texto rojos.
Mismo tratamiento "pulido" que el dorado pero en paleta destructiva. */
#btn-cerrar-caja {
background: linear-gradient(180deg, #5a3530 0%, #3a221e 55%, #2a1814 100%);
color: #f08a72;
border: 1px solid var(--error);
}
#btn-cerrar-caja:hover:not(:disabled) {
background: linear-gradient(180deg, #6a3d37 0%, #4a2820 55%, #321a16 100%);
color: #ff9c83;
border-color: var(--error);
box-shadow:
inset 0 1px 0 rgba(255,200,180,0.18),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 6px 18px rgba(231,111,81,0.35),
0 2px 4px rgba(0,0,0,0.25) !important;
}
/* Chip/pill del contador de transacciones — al lado del titulo */
.tx-count-badge {
display: inline;
margin-left: 6px;
background: transparent;
color: inherit;
border: none;
padding: 0;
font-family: inherit;
font-variant-numeric: tabular-nums;
font-size: inherit;
font-weight: 900;
letter-spacing: 0;
vertical-align: baseline;
position: relative;
top: -3px;
}
.footer-info { margin-top: 32px; padding: 16px 20px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--text-subtle); text-align: center; line-height: 1.6; }
.footer-info strong { color: var(--accent); }
/* TRANSACTION LIST */
/* Lista tipo iOS Settings: filas continuas, sin barra de color lateral */
.tx-list { display: flex; flex-direction: column; gap: 14px; background: transparent; border: none; border-radius: 0; overflow: visible; padding: 0; }
/* GRUPOS de transacciones por TIPO (albaranes / facturas / personal…)
SIN overflow:hidden — bloquearía el dropdown ⋮ del último item. */
.tx-group {
background: rgba(0,0,0,0.22);
border: 1px solid var(--border);
border-radius: 12px;
border-left: 3px solid var(--g-accent, var(--border));
}
.tx-group-header {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.tx-group-body .tx-item:last-child {
border-bottom-left-radius: 11px;
border-bottom-right-radius: 11px;
}
.tx-group.g-credit { --g-accent: #d4af37; } /* amber — a crédito */
.tx-group.g-cash { --g-accent: #4caf7d; } /* verde — pagado cash */
.tx-group.g-staff { --g-accent: #6d8fc7; } /* azul — personal */
.tx-group.g-music { --g-accent: #b388e0; } /* morado — música */
.tx-group.g-other { --g-accent: #8a8a8a; } /* gris — otros */
.tx-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px;
background: rgba(245,232,211,0.025);
border-bottom: 1px solid rgba(245,232,211,0.06);
gap: 12px;
}
.tx-group-titles {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.tx-group-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--g-accent, var(--text));
}
.tx-group-sub {
font-size: 10.5px;
color: var(--text-subtle);
opacity: 0.75;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-group-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
font-size: 11px;
color: var(--text-subtle);
}
.tx-group-count {
background: rgba(245,232,211,0.06);
padding: 1px 7px;
border-radius: 8px;
font-weight: 600;
font-size: 10.5px;
color: var(--text-subtle);
letter-spacing: 0.2px;
}
.tx-group-sep { display: none; }
.tx-group-total {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
font-size: 13.5px;
color: var(--g-accent, var(--text));
letter-spacing: -0.2px;
}
.tx-group-body { display: flex; flex-direction: column; }
@media (max-width: 540px) {
.tx-list { gap: 12px; }
.tx-group-header { padding: 10px 12px; gap: 8px; }
.tx-group-titles { gap: 7px; }
.tx-group-label { font-size: 11px; letter-spacing: 1px; }
.tx-group-sub { font-size: 9.5px; }
.tx-group-meta { font-size: 10.5px; }
.tx-group-total { font-size: 12px; }
}
.tx-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 1px solid rgba(245,232,211,0.05);
transition: background 0.18s;
animation: slideIn 0.25s ease;
}
.tx-item:last-child { border-bottom: none; }
/* IMPORTANTE: sin fondo en :focus / :active / :focus-within para evitar
que una fila se quede oscura después de tocarla al scrollear.
Forzado con !important por si algún reglón heredado lo sobrescribe. */
.tx-item,
.tx-item:focus,
.tx-item:active,
.tx-item:focus-within,
.tx-item[data-tx-open]:active {
background: transparent !important;
outline: none !important;
}
/* Solo se muestra outline con navegación de TECLADO (no táctil) */
.tx-item:focus-visible {
outline: 2px solid rgba(212, 175, 55, 0.5) !important;
outline-offset: -2px;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
/* Con ratón (escritorio): la fila se ilumina en dorado suave y se desplaza un poco
al pasar por encima. Solo con ratón: en táctil no, que se quedaba una fila "encendida". */
@media (hover: hover) {
.tx-item { cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
/* Como en el Horario: marco dorado fino alrededor de la fila */
.tx-item:hover {
background: rgba(212,175,55,0.18) !important;
box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 14px rgba(0,0,0,0.25);
border-radius: 10px;
}
.tx-item:hover .tx-name, .tx-item:hover .tx-prov { color: #fff; }
}
/* Icono pequeño y sutil — solo escaneo visual de tipo, sin fondo dorado */
.tx-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: transparent;
border: none;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
opacity: 0.85;
filter: saturate(0.6);
margin-top: -2px;
}
.tx-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Sin divisor entre nombre y resto — quedaba ruidoso. */
.tx-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tx-title { font-size: 14px; color: var(--text); font-weight: 600; flex: 1; min-width: 0; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; }
.tx-meta { font-size: 11px; color: var(--text-subtle); display: flex; flex-direction: column; gap: 6px; }
.tx-meta-row, .tx-pills-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tx-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tx-bottom-row .tx-pills-row { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tx-bottom-row .tx-amount { flex: 0 0 auto; }
.tx-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.tx-amount {
font-family: 'Manrope', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 16px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
line-height: 1;
letter-spacing: -0.2px;
word-spacing: 0;
}
.tx-actions { display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.tx-item:hover .tx-actions { opacity: 1; }
.tx-action-btn { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tx-action-btn:hover { color: var(--error); border-color: var(--error); }
.tx-method-pill { display: inline-block; padding: 2px 8px; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.2); border-radius: 100px; font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.tx-method-pill.credito { background: rgba(118,179,157,0.1); border-color: rgba(118,179,157,0.2); color: var(--success); }
/* Mini chip de categoria junto al pill de metodo de pago */
.tx-cat-pill {
display: inline-block; padding: 2px 8px;
background: rgba(245,232,211,0.05);
border: 1px solid rgba(245,232,211,0.15);
border-radius: 100px;
font-size: 10px; color: var(--text-muted);
font-weight: 700; letter-spacing: 0.8px;
}
.tx-cat-pill.tx-cat-comida { color: #d8956a; border-color: rgba(216,149,106,0.30); background: rgba(216,149,106,0.08); }
.tx-cat-pill.tx-cat-bebida { color: #76b39d; border-color: rgba(118,179,157,0.30); background: rgba(118,179,157,0.08); }
.tx-cat-pill.tx-cat-musica { color: #b89cd8; border-color: rgba(184,156,216,0.30); background: rgba(184,156,216,0.08); }
.tx-cat-pill.tx-cat-otros { color: var(--text-muted); border-color: rgba(158,181,169,0.25); }
/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; animation: fadeIn 0.2s ease; overscroll-behavior: contain; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 640px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border-strong); border-radius: 18px; padding: 32px; animation: modalIn 0.3s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Cabecera de modal — flujo normal */
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.modal-close { flex-shrink: 0; }
/* Modal "Ver detalles": header (con ✕) fijo arriba, body scrolea dentro.
Patrón flex-column: el .modal no scrolea, el #tx-details-body sí. */
#modal-tx-details .modal {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
#modal-tx-details .modal-header {
flex-shrink: 0;
margin-bottom: 12px;
align-items: center; /* la ✕ a la altura del título (Robert, 5-sep-2026) */
}
#modal-tx-details .modal-header .modal-close { position: static; }
/* Adjuntos centrados, tenga 1 o varios (Robert, 5-sep-2026) */
#modal-tx-details .tx-d-attach-grid { justify-content: center !important; justify-items: center; }
#modal-tx-details .tx-d-attach-head { justify-content: center; }
#modal-tx-details #tx-details-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -8px;
padding: 0 8px;
}
/* Modal ADMIN (editar proveedor/empleado/etc): scroll normal de todo el
modal, pero la ✕ va FUERA del header (hija directa del .modal) para
que su position:sticky funcione todo el recorrido — siempre visible
y clickable, sin fijar el header entero. */
.modal-close-float {
position: sticky;
top: 6px;
z-index: 30;
margin-left: auto;
/* La X "flota" sin empujar el contenido: el header sube a su lado. */
margin-bottom: -36px;
background: var(--bg-raised);
border: 1px solid rgba(224, 106, 80, 0.55);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.modal-close-float:hover { background: var(--bg-raised-hover); }
/* HISTORIAL + INFORMES: header entero STICKY (título + ✕) con fondo
sólido de BORDE a BORDE del modal — nada se superpone al scrollear. */
#modal-history .modal, #modal-reports .modal {
padding-top: 0;
overflow-x: hidden; /* nunca desplazamiento lateral */
}
#modal-history .modal-header, #modal-reports .modal-header {
position: sticky;
top: 0;
z-index: 30;
margin: 0 -32px 12px;
padding: 18px 32px 12px;
background: var(--bg-card);
border-radius: 17px 17px 0 0;
box-shadow: 0 10px 16px -8px rgba(0, 0, 0, 0.5);
}
#modal-history .modal-close, #modal-reports .modal-close { position: static; }
/* Móvil: el .modal tiene padding 14px — los márgenes del header sticky
deben COINCIDIR o desbordan (causaba scroll lateral y solapes). */
@media (max-width: 540px) {
#modal-history .modal-header, #modal-reports .modal-header {
margin: 0 -14px 10px;
padding: 14px 14px 10px;
border-radius: 13px 13px 0 0;
}
}
/* Zona peligrosa (admin → Archivo): reset total */
.danger-zone {
margin-top: 22px;
padding: 14px 16px;
background: rgba(231, 111, 81, 0.06);
border: 1px solid rgba(231, 111, 81, 0.30);
border-radius: 10px;
}
.danger-zone-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--error);
margin-bottom: 8px;
}
.danger-zone-text {
font-size: 12px;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 12px;
}
.danger-zone .btn {
width: auto;
margin: 0;
padding: 10px 18px;
font-size: 12.5px;
letter-spacing: 0.5px;
text-transform: none;
}
/* Acciones del cierre junto a la fecha (caja cerrada) */
#cierre-actions-top { margin-top: 12px; }
#cierre-actions-top.hidden { display: none !important; }
/* Móvil: rejilla 2 por fila — botones a ancho completo, texto sin salirse */
@media (max-width: 620px) {
#cierre-actions-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
#cierre-actions-top .btn {
width: 100%;
margin: 0;
font-size: 12px;
padding: 11px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.3px;
}
/* Si el número de botones es impar, el último ocupa la fila entera */
#cierre-actions-top .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Tarjetas del historial: meta (apertura/cierre) + fila de stats
organizada GASTOS · VENTAS · EFECTIVO LLEVADO */
.history-item-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 11.5px;
color: var(--text-subtle);
margin: 5px 0 10px;
}
.history-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.history-stat {
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(245, 232, 211, 0.06);
border-radius: 8px;
padding: 7px 10px;
min-width: 0;
}
.history-stat-k {
font-size: 9px;
letter-spacing: 0.8px;
text-transform: uppercase;
font-weight: 700;
color: var(--text-subtle);
opacity: 0.75;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-stat-v {
font-family: 'Manrope', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Móvil: stats más compactas para que los importes largos no desborden */
@media (max-width: 540px) {
.history-stats { gap: 5px; }
.history-stat { padding: 6px 8px; }
.history-stat-k { font-size: 8px; letter-spacing: 0.5px; }
.history-stat-v { font-size: 11.5px; }
}
.history-stat-v.is-gasto { color: #e8927c; }
.history-stat-v.is-venta { color: var(--text); }
.history-stat-v.is-llevado { color: var(--accent); }
/* Ficha (empleado/proveedor/músico): cabecera fija con la ✕ dentro, sobre fondo
sólido, para que no flote encima de los campos al hacer scroll. */
#modal-admin-edit .modal-header {
position: sticky; top: -32px; z-index: 31; /* -padding del modal: pegada al borde */
/* margen negativo = padding del modal: la cabecera arranca en el borde y nada asoma por encima */
margin: -32px -32px 14px; padding: 22px 32px 10px;
background: var(--bg-pub); align-items: center;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
#modal-admin-edit .modal-header .modal-close { position: static; box-shadow: none; }
@media (max-width: 600px) {
#modal-admin-edit .modal-header { margin: -18px -14px 12px; padding: 14px 14px 8px; top: -18px; }
}
/* Pie de la ficha: quitar a la izquierda, Cancelar + Guardar a la derecha */
.form-actions-split { justify-content: space-between; align-items: center; }
.form-actions-split .form-actions-left,
.form-actions-split .form-actions-right { display: flex; gap: 8px; flex-wrap: wrap; }
.form-actions-split .form-actions-right { margin-left: auto; }
#modal-admin-edit .form-actions .btn { min-width: 0; }
.form-actions-split .form-actions-left .btn { padding: 9px 14px; font-weight: 600; }
@media (max-width: 480px) {
.form-actions-split { flex-direction: column-reverse; align-items: stretch; }
.form-actions-split .form-actions-right .btn,
.form-actions-split .form-actions-left .btn { flex: 1 1 calc(50% - 4px); }
}
.modal-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--text); font-weight: 700; }
/* La X se queda pegada arriba al hacer scroll dentro del modal — siempre clickable.
Fondo solido + sombra para que se lea bien sobre el contenido que pasa por debajo. */
.modal-close {
width: 32px; height: 32px; border-radius: 8px;
background: rgba(224, 106, 80, 0.10);
border: 1px solid rgba(224, 106, 80, 0.35);
color: #e58b76; cursor: pointer; font-size: 18px;
display: flex; align-items: center; justify-content: center;
position: sticky; top: 0;
z-index: 20;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.modal-close:hover {
background: rgba(224, 106, 80, 0.22);
color: #ff9a82;
border-color: var(--error);
}
/* TX TYPE PICKER */
.picker-scan-ai { width: 100%; margin-bottom: 12px; }
.tx-types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 540px) { .tx-types-grid { grid-template-columns: 1fr; } }
/* "Manual / Otros" a lo ancho y más discreto: es el "cualquier otra cosa" */
@media (min-width: 541px) {
.tx-type-btn[data-tipo="manual"] { grid-column: 1 / -1; padding: 12px 18px; opacity: 0.85; }
.tx-type-btn[data-tipo="manual"] .tx-type-btn-icon { width: 36px; height: 36px; font-size: 18px; }
}
.tx-type-btn { padding: 18px; background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.15s; display: flex; align-items: center; gap: 12px; color: var(--text); font-family: inherit; }
@media (hover: hover) { .tx-type-btn:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-2px); } }
.tx-type-btn-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.tx-type-btn-text { flex: 1; }
.tx-type-btn-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.tx-type-btn-desc { font-size: 11px; color: var(--text-subtle); letter-spacing: 0.5px; }
/* FORM ACTIONS — botones de los modales (Cancelar / Guardar / etc.).
Centrados, compactos, mismo lenguaje visual que los closed-actions. */
.form-actions {
display: flex; gap: 8px; margin-top: 22px;
justify-content: center;
flex-wrap: wrap;
}
.form-actions .btn {
flex: 0 1 auto;
min-width: 140px;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: none;
border-radius: 8px;
margin-top: 0;
width: auto;
}
.form-actions .btn:hover:not(:disabled) {
transform: none;
box-shadow: none;
}
/* Primario (Guardar / Aceptar / Sí, …) — dorado solido */
.form-actions .btn:not(.btn-secondary):not(.btn-danger):not(.btn-archive) {
background: #c9aa41;
color: var(--bg-deep);
border: 1px solid #c9aa41;
}
.form-actions .btn:not(.btn-secondary):not(.btn-danger):not(.btn-archive):hover:not(:disabled) {
background: #d6b84f;
border-color: #d6b84f;
}
/* Secundario (Cancelar) — relleno gris suave */
.form-actions .btn-secondary {
background: rgba(245,232,211,0.07);
color: var(--text);
border: 1px solid var(--border-strong);
}
.form-actions .btn-secondary:hover:not(:disabled) {
background: rgba(245,232,211,0.13);
border-color: var(--text-muted);
}
/* Destructivo (Sí, eliminar) — relleno rojo suave */
.form-actions .btn-danger {
background: rgba(231,111,81,0.18);
color: var(--error);
border: 1px solid rgba(231,111,81,0.50);
}
.form-actions .btn-danger:hover:not(:disabled) {
background: rgba(231,111,81,0.28);
border-color: var(--error);
}
@media (max-width: 480px) {
.form-actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
/* METHOD TOGGLE */
.method-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 10px; }
.method-option { padding: 12px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: all 0.15s; }
.method-option.active { background: var(--accent); color: var(--bg-deep); }
/* Flash sutil cuando la IA selecciona "Efectivo" porque detectó PAGADO */
.method-option.auto-filled-flash {
animation: methodAutoFlash 1.8s ease-out;
}
@keyframes methodAutoFlash {
0% { box-shadow: 0 0 0 0 rgba(76,175,125,0.7); }
40% { box-shadow: 0 0 0 8px rgba(76,175,125,0); }
100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
}
/* DAY SUMMARY (sticky-like) */
.day-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-bottom: 12px;
padding: 8px;
background: rgba(0,0,0,0.18);
border: 1px solid var(--border);
border-radius: 10px;
}
/* Strip de totales por categoria, bajo el resumen del dia.
Márgenes SIMÉTRICOS: mismo hueco encima y debajo del strip. */
.day-cat-strip {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 8px 14px;
padding: 10px 14px;
margin-bottom: 12px;
background: rgba(0,0,0,0.15);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12px; color: var(--text-muted);
letter-spacing: 0.3px;
}
.day-cat-strip .cat-strip-item {
display: inline-flex; align-items: center; gap: 8px;
}
.day-cat-strip .cat-strip-left {
display: inline-flex; align-items: center; gap: 6px;
}
.day-cat-strip .cat-strip-name {
color: var(--text-muted);
}
.day-cat-strip .cat-strip-val {
color: var(--text); font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 700;
}
.day-cat-strip .cat-strip-dots {
/* Por defecto (desktop inline) los puntos no se muestran. Solo aparecen
en mobile donde cada item ocupa una celda de grid con ancho fijo. */
display: none;
}
.day-cat-strip .cat-strip-ico {
font-size: 13px;
}
.day-cat-strip .cat-strip-sep {
color: var(--text-subtle); opacity: 0.4;
}
.day-summary-item {
text-align: center;
padding: 9px 8px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.day-summary-label { font-size: 9.5px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; margin-bottom: 5px; }
.day-summary-value { font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); font-weight: 700; }
.day-summary-value.accent { color: var(--accent); }
/* El TOTAL del día destaca sobre salida/crédito — lectura instantánea */
#sum-total { font-size: 18px; letter-spacing: -0.3px; }
.day-summary-value.success { color: var(--success); }
.day-summary-value.error { color: var(--error); }
/* TOAST */
.toast { position: fixed; top: 20px; right: 20px; background: var(--bg-card); border: 1px solid var(--success); border-radius: 10px; padding: 14px 18px; color: var(--text); z-index: 2000; box-shadow: 0 10px 30px rgba(0,0,0,0.4); animation: toastIn 0.3s ease; max-width: 360px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast.error { border-color: var(--error); }
.toast-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--success); }
.toast.error .toast-title { color: var(--error); }
.toast-body { font-size: 12px; color: var(--text-muted); }
/* SUB-TYPE PICKER (compra directa) */
.subtype-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.subtype-btn { padding: 14px 8px; background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: center; transition: all 0.15s; color: var(--text); font-family: inherit; }
.subtype-btn:hover, .subtype-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.subtype-btn-icon { font-size: 22px; margin-bottom: 6px; }
.subtype-btn-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
/* CIERRE — live totals box */
.cierre-totals { background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin: 20px 0; }
.cierre-totals-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.cierre-totals-row + .cierre-totals-row { border-top: 1px solid var(--border); }
.cierre-totals-row.highlight { padding: 14px 12px; margin-top: 8px; border-top: 2px solid var(--accent); border-radius: 8px; background: var(--accent-soft); font-weight: 700; }
.cierre-totals-label { color: var(--text-muted); }
.cierre-totals-row.highlight .cierre-totals-label { color: var(--text); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.cierre-totals-value { font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.cierre-totals-value.accent { color: var(--accent); font-size: 18px; }
.cierre-totals-value.error { color: var(--error); }
.cierre-totals-value.warning { color: var(--warning); }
/* CIERRE — warning style for confirmation modal */
.warning-banner { padding: 16px; background: rgba(244,162,97,0.12); border: 1px solid var(--warning); border-radius: 10px; margin-bottom: 20px; text-align: center; }
.warning-banner-icon { font-size: 32px; margin-bottom: 8px; }
.warning-banner-text { font-size: 14px; color: var(--warning); font-weight: 700; letter-spacing: 0.5px; }
.warning-banner-subtext { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.cierre-summary { background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.cierre-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.cierre-summary-row + .cierre-summary-row { border-top: 1px solid var(--border); }
/* New structured cierre summary (sections for clarity) */
.cierre-summary-v2 { display: flex; flex-direction: column; gap: 14px; }
.cierre-summary-section {
background: rgba(0,0,0,0.18); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
}
.cierre-summary-section-title {
font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--accent); font-weight: 700; margin-bottom: 10px;
padding-bottom: 8px; border-bottom: 1px solid rgba(212,175,55,0.2);
}
.cs-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; gap: 10px; }
.cs-row.subtotal { padding-top: 9px; margin-top: 4px; border-top: 1px solid rgba(212,175,55,0.18); }
.cs-row.highlight {
padding: 10px 12px; margin-top: 6px;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
border: 1px solid rgba(212,175,55,0.4); border-radius: 8px;
}
.cs-label { color: var(--text-muted); font-size: 13px; flex: 1; min-width: 0; }
.cs-label .cs-hint { color: var(--text-subtle); font-size: 11px; margin-left: 6px; }
.cs-value { font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cs-value.pos { color: var(--success); }
.cs-value.neg { color: var(--error); }
.cs-value.total { font-size: 15px; }
.cs-value.cash-sobre { font-size: 18px; color: var(--accent); }
.cs-row.highlight .cs-label { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.cs-note { font-size: 11px; color: var(--text-subtle); margin-top: 8px; font-style: italic; padding-left: 4px; }
.cs-obs { font-size: 13px; color: var(--text); line-height: 1.5; padding: 4px 0; }
.cierre-summary-label { color: var(--text-muted); }
.cierre-summary-value { color: var(--text); font-weight: 600; font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cierre-summary-value.accent { color: var(--accent); }
/* Closed caja state */
.badge-closed { background: rgba(231,111,81,0.15); color: var(--error); }
/* Acciones tras el cierre — todas en una linea (wrap a 2 lineas en
moviles pequeños). Tamaños compactos pero con presencia clara:
- PDF (primario, dorado solido)
- Imprimir / Email (relleno suave neutro)
- Reabrir / Archivar (relleno suave coloreado, solo admin) */
.closed-actions {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.closed-actions .btn {
flex: 1 1 0;
min-width: 90px;
padding: 10px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: none;
border-radius: 8px;
margin-top: 0;
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.closed-actions .btn:hover:not(:disabled) {
transform: none;
box-shadow: none;
}
/* Primario PDF — dorado solido, queda como el boton mas llamativo */
.closed-actions .btn:not(.btn-secondary):not(.btn-danger):not(.btn-archive) {
background: var(--accent);
color: var(--bg-deep);
border: 1px solid var(--accent);
}
.closed-actions .btn:not(.btn-secondary):not(.btn-danger):not(.btn-archive):hover:not(:disabled) {
background: #e2c155;
border-color: #e2c155;
}
/* Secundarios (Imprimir, Email) — relleno gris suave */
.closed-actions .btn-secondary {
background: rgba(245,232,211,0.07);
color: var(--text);
border: 1px solid var(--border-strong);
}
.closed-actions .btn-secondary:hover:not(:disabled) {
background: rgba(245,232,211,0.13);
border-color: var(--text-muted);
}
/* Reabrir — relleno rojo suave */
.closed-actions .btn-danger {
background: rgba(231,111,81,0.18);
color: var(--error);
border: 1px solid rgba(231,111,81,0.50);
}
.closed-actions .btn-danger:hover:not(:disabled) {
background: rgba(231,111,81,0.28);
border-color: var(--error);
}
/* Archivar — relleno ambar suave (warning, no destructivo) */
.closed-actions .btn-archive {
background: rgba(244,162,97,0.18);
color: var(--warning);
border: 1px solid rgba(244,162,97,0.50);
}
.closed-actions .btn-archive:hover:not(:disabled) {
background: rgba(244,162,97,0.28);
border-color: var(--warning);
}
.tx-list.locked .tx-actions { display: none; }
.tx-list.locked .tx-item { cursor: default; }
/* Inline hora edit button (next to apertura) */
.hora-edit-btn {
background: transparent; border: none; cursor: pointer; padding: 2px 4px;
margin-left: 6px; font-size: 13px; opacity: 0.5; transition: opacity 0.15s;
vertical-align: middle; border-radius: 4px;
}
.hora-edit-btn:hover { opacity: 1; background: rgba(245,232,211,0.1); }
/* Banner: viewing a non-today caja — tira fina, sin duplicar la fecha (esa va en el panel debajo) */
.viewing-banner {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 14px; background: rgba(244,162,97,0.10); border: 1px solid rgba(244,162,97,0.50);
border-radius: 8px; margin-bottom: 8px; font-size: 12px; color: var(--warning);
}
.viewing-banner-text { font-weight: 600; letter-spacing: 0.3px; }
.viewing-banner-btn {
background: transparent; border: 1px solid rgba(244,162,97,0.50); color: var(--warning);
padding: 4px 10px; border-radius: 8px; font-family: inherit; font-size: 11px;
font-weight: 700; letter-spacing: 0.4px; cursor: pointer; transition: all 0.15s;
}
.viewing-banner-btn:hover { background: var(--warning); color: var(--bg-deep); border-color: var(--warning); }
/* History list — SIN scroll interno: todo el modal scrollea entero
(título incluido) y solo la ✕ flotante queda fija arriba. */
.history-list {
display: flex; flex-direction: column; gap: 10px;
padding: 4px;
}
.history-item {
padding: 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; transition: all 0.15s;
}
.history-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.history-item.current { border-color: var(--accent); background: var(--accent-soft); }
.history-item-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.history-item-date { font-weight: 700; font-size: 14px; color: var(--text); }
.history-item-status {
font-size: 10px; padding: 3px 8px; border-radius: 100px;
font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.history-item-status.abierta { background: rgba(118,179,157,0.15); color: var(--success); }
.history-item-status.cerrada { background: rgba(231,111,81,0.15); color: var(--error); }
.history-item-info {
font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 12px;
}
.history-item-info-num { color: var(--accent); font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.history-loading { text-align: center; padding: 30px; color: var(--text-muted); }
/* Loading skeleton for transaction list while data arrives */
.tx-skeleton-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.tx-skeleton {
height: 64px; border-radius: 10px;
background: linear-gradient(90deg,
rgba(0,0,0,0.18) 0%,
rgba(245,232,211,0.05) 50%,
rgba(0,0,0,0.18) 100%);
background-size: 300% 100%;
animation: shimmer 1.4s ease-in-out infinite;
border: 1px solid var(--border);
}
@keyframes shimmer {
0% { background-position: 300% 50%; }
100% { background-position: -100% 50%; }
}
/* === ADMIN PANEL === */
.admin-tabs {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 4px; background: rgba(0,0,0,0.25);
border: 1px solid var(--border); border-radius: 12px;
margin-bottom: 18px;
}
.admin-tab {
flex: 1; min-width: 100px;
padding: 10px 14px; background: transparent; border: none;
color: var(--text-muted); font-family: inherit; font-size: 12px;
font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
cursor: pointer; border-radius: 8px; transition: all 0.15s;
}
.admin-tab:hover { color: var(--text); background: rgba(245,232,211,0.04); }
.admin-tab.active {
color: var(--accent); background: var(--accent-soft);
}
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-toolbar {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
margin-bottom: 14px; flex-wrap: wrap;
}
.admin-search {
flex: 1; min-width: 200px;
padding: 10px 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--border);
border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px;
}
.admin-search::placeholder { color: var(--text-subtle); }
.admin-search:focus { outline: none; border-color: var(--accent); }
.admin-list {
display: flex; flex-direction: column; gap: 8px;
height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding: 2px;
}
/* Modal de admin — patrón "app": UN solo scroll continuo para todo el
contenido. El título scrollea y desaparece; cuando la fila de PESTAÑAS
llega arriba se queda STICKY (con la ✕ integrada en esa misma fila),
y el resto sigue scrolleando por debajo. Aprovecha toda la altura. */
#modal-admin .modal {
height: 85vh;
max-height: 85vh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 14px 20px 18px;
}
/* Cabecera fija (título + ✕ arriba a la derecha) y debajo las pestañas, también fijas */
#modal-admin .modal-header {
position: sticky; top: -14px; z-index: 31; /* -padding del modal */
margin: -14px -20px 6px; padding: 14px 20px 8px;
background: var(--bg-pub);
display: flex; align-items: center; justify-content: space-between;
}
#modal-admin .modal-header .modal-close { position: static; box-shadow: none; }
#modal-admin .modal-header { height: 54px; box-sizing: border-box; }
@media (max-width: 600px) {
#modal-admin .modal-header { margin: -18px -14px 6px; padding: 12px 14px 6px; top: -18px; height: 52px; }
#modal-admin .admin-tabs { top: 25px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#modal-admin .admin-tabs::-webkit-scrollbar { display: none; }
/* mas especifico que la regla general de escritorio (que va despues en el archivo) */
#modal-admin .admin-tabs .admin-tab { flex: 0 0 auto; min-width: max-content; padding: 10px 12px; }
}
#modal-admin .modal-title {
font-size: 15px;
letter-spacing: 0.5px;
opacity: 0.9;
}
/* Fila de pestañas STICKY: fondo sólido + sombra para leerse encima
del contenido que pasa por debajo. La ✕ vive dentro de esta fila. */
#modal-admin .admin-tabs {
position: sticky;
top: 40px; /* justo debajo de la cabecera fija (54px de alto - 14px de padding) */
z-index: 30;
margin-bottom: 12px;
padding: 3px;
gap: 2px;
background: var(--bg-pub);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
align-items: center;
flex-wrap: nowrap;
}
#modal-admin .admin-tab {
padding: 10px 9px;
font-size: 11px;
letter-spacing: 0.5px;
min-width: 0;
white-space: nowrap;
flex: 1 1 auto;
border-radius: 8px;
}
#modal-admin .admin-tab.active {
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35) inset;
}
/* ✕ integrada en la fila de tabs — siempre visible al scrollear */
#modal-admin .admin-tabs .modal-close {
position: static;
width: 30px; height: 30px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
margin-left: 2px;
box-shadow: none;
}
/* La lista fluye con el scroll del modal (sin scroll interno propio) */
#modal-admin .admin-list {
height: auto;
overflow: visible;
}
/* Toolbar compacta estilo app: buscador + "+ Nuevo" en UNA fila.
Nada de botón amarillo a todo lo ancho. */
#modal-admin .admin-toolbar {
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 8px;
}
#modal-admin .admin-toolbar .admin-search {
min-width: 0;
padding: 9px 12px;
}
#modal-admin .admin-toolbar .btn {
width: auto;
flex: 0 0 auto;
padding: 9px 16px;
font-size: 12px;
letter-spacing: 0.5px;
margin-top: 0;
}
/* Acciones secundarias (Excel/plantillas): SIEMPRE en una línea,
sin iconos, botones que se reparten el ancho */
#modal-admin .admin-toolbar-extra {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin-bottom: 10px;
opacity: 0.85;
}
#modal-admin .admin-toolbar-extra .btn-mini {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-size: 10.5px;
padding: 7px 6px;
}
/* === ADMIN FORM SECTIONS (proveedor, etc.) === */
.form-section-header {
display: flex; align-items: center; gap: 10px;
margin: 20px 0 12px;
font-size: 11px; color: var(--accent);
text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
}
.form-section-header:first-child { margin-top: 0; }
.form-section-header::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
/* Selector 3 opciones para "Local" (Spoons / Kings / Compartido) */
.three-way-toggle {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 0; padding: 4px;
background: rgba(0,0,0,0.30); border: 1px solid var(--border);
border-radius: 10px;
}
.three-way-option {
padding: 10px 8px;
background: transparent; border: none;
color: var(--text-muted);
font-family: inherit; font-size: 12px; font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer; border-radius: 8px;
transition: all 0.15s;
}
.three-way-option:hover { color: var(--text); background: rgba(245,232,211,0.04); }
.three-way-option.active {
background: var(--accent); color: var(--bg-deep);
}
/* Botones de Excel en la toolbar de admin-proveedores */
.admin-toolbar-extra {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 10px;
}
.admin-toolbar-extra .btn-mini {
flex: 0 1 auto;
padding: 7px 12px;
background: rgba(245,232,211,0.06);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit; font-size: 11px; font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
transition: all 0.15s;
}
.admin-toolbar-extra .btn-mini:hover {
color: var(--text); border-color: var(--accent); background: rgba(212,175,55,0.08);
}
.admin-item {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
min-height: 62px; /* todas las filas iguales, tengan o no segunda linea */
padding: 10px 14px; background: rgba(0,0,0,0.22); border: 1px solid var(--border);
border-radius: 10px; transition: all 0.15s;
}
/* Hover solo con raton: en tactil se quedaba una fila "encendida" al hacer scroll */
@media (hover: hover) {
.admin-item:hover { border-color: var(--accent); background: var(--accent-soft); }
}
.admin-item.archived { opacity: 0.5; }
.admin-item.archived .admin-item-name::after {
content: ' · archivado'; color: var(--warning); font-weight: 400;
font-size: 11px; letter-spacing: 0.5px;
}
.admin-item.deleted {
opacity: 0.55;
border-color: rgba(231,111,81,0.30);
background: rgba(231,111,81,0.04);
}
.admin-item.deleted .admin-item-name { color: var(--text-muted); text-decoration: line-through; }
.admin-item.deleted:hover {
opacity: 1;
border-color: var(--error);
background: rgba(231,111,81,0.07);
}
.admin-item-main { flex: 1; min-width: 0; }
.admin-item-name { font-weight: 700; font-size: 14px; color: var(--text); }
/* Segunda linea: texto plano separado por puntos, sin pastillas (Robert, 4-sep-2026:
"quitar las pastillas, es mucho cante"). Una sola linea, con puntos suspensivos. */
.admin-item-meta {
font-size: 12px; color: var(--text-muted); margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-item-meta > * { display: inline; }
.admin-item-meta > * + *::before { content: '·'; margin: 0 7px; color: var(--text-subtle); }
.admin-item-meta-tag { color: var(--text-muted); font-weight: 500; }
.admin-item-meta .meta-accent { color: var(--accent); font-weight: 600; }
.admin-item-meta .meta-warn { color: var(--error); font-weight: 600; }
/* Escritorio: botones de Excel a tamaño natural y a la izquierda (regla de Robert:
en pantalla grande no estirar botones). En móvil siguen repartidos. */
@media (min-width: 768px) {
#modal-admin .admin-toolbar-extra { justify-content: flex-start; }
#modal-admin .admin-toolbar-extra .btn-mini { flex: 0 0 auto; padding: 7px 14px; }
}
/* Informes: botón a tamaño natural y aviso mientras no hay informe generado */
/* Subtítulo de Lecturas X: frase normal, sin mayúsculas ni separación (se partía en dos líneas) */
#lecturas-x-overview-subtitle { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
#btn-generate-report { width: auto; padding: 12px 30px; margin-top: 0; }
.report-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 26px 10px 10px; }
.report-empty .ocr-spinner { vertical-align: middle; margin-right: 6px; }
/* Recalculando: el informe anterior se atenúa y el aviso "Calculando" se ve encima */
#modal-reports .modal.report-loading #report-content { opacity: 0.35; pointer-events: none; transition: opacity 0.15s; }
#modal-reports .modal.report-loading .report-empty { display: block; padding: 10px; }
@media (min-width: 768px) {
#modal-reports .modal { min-height: 60vh; max-width: 980px !important; }
#modal-reports .report-content { font-size: 15px; }
#modal-reports .report-row { padding: 12px 0; }
#modal-reports .report-row.highlight .report-value { font-size: 18px; }
#modal-reports .report-section-title { font-size: 13px; }
}
/* Fichas: bloque "Más datos" plegado (teléfono, correo, IBAN, notas…) */
details.form-more { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 4px; }
details.form-more > summary {
cursor: pointer; list-style: none; user-select: none;
font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
color: var(--text-muted); padding: 10px 0 6px; display: flex; align-items: center; gap: 8px;
}
details.form-more > summary::-webkit-details-marker { display: none; }
details.form-more > summary::before {
content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg); transition: transform 0.15s; margin-left: 2px;
}
details.form-more[open] > summary::before { transform: rotate(45deg); }
details.form-more > summary:hover { color: var(--text); }
/* Escritorio: la ventana de administración no cambia de alto al cambiar de pestaña */
@media (min-width: 768px) {
#modal-admin .modal { min-height: 78vh; }
}
/* Ficha de solo lectura: filas etiqueta / valor */
.detail-rows { display: flex; flex-direction: column; }
.detail-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .dl { color: var(--text-muted); font-size: 12px; letter-spacing: 0.3px; flex: 0 0 auto; }
.detail-row .dv { color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.detail-row .dv.num { font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.detail-section { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); padding: 16px 2px 4px; }
.detail-section:first-child { padding-top: 4px; }
.detail-empty { color: var(--text-subtle); font-size: 13px; padding: 14px 2px; }
#modal-admin-detail .modal-header { margin-bottom: 10px; align-items: flex-start; }
#modal-admin-detail .panel-subtitle { text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-top: 2px; }
#modal-admin-detail .form-actions .btn { min-width: 0; }
/* La fila entera se puede tocar para ver la ficha */
.admin-item-main[data-view-id] { cursor: pointer; }
.ocr-details-btn {
background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
padding: 3px 9px; border-radius: 100px; cursor: pointer; margin-left: 6px; vertical-align: middle;
}
.ocr-details-btn:hover { color: var(--text); border-color: var(--text-muted); }
.ocr-details { margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.ocr-warn-line { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(231,111,81,0.12); border: 1px solid rgba(231,111,81,0.4); color: var(--text); font-size: 13px; }
.diag-box { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,0.18); }
.diag-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.diag-log { width: 100%; min-height: 120px; max-height: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.4; color: var(--text); background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 8px; padding: 8px; resize: vertical; }
.diag-actions { display: flex; gap: 6px; margin-top: 8px; }
.app-version { font-size: 10px; letter-spacing: 1px; color: var(--text-subtle); opacity: 0.7; }
#app-version-login { margin-top: 6px; text-align: center; }
.app-version-admin { text-align: right; margin: -4px 0 8px; }
/* ===== PORTADA MÓVIL "opción 2" (solo hasta 767px; en escritorio no existe) ===== */
#mv2-top, #mv2-fabs { display: none; }
@media (max-width: 767px) {
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) #mv2-top { display: block; position: sticky; top: 0; z-index: 25; background: var(--bg-deep); padding: 4px 0 8px; margin-bottom: 2px; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) #mv2-fabs { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .panel-caja,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-panel-header,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) #tx-summary-wrap,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .action-buttons,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .fab-scan,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-group-header,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-time-leading { display: none !important; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .panel-tx { background: transparent; border: none; padding: 0 0 190px; box-shadow: none; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-group { background: transparent; border: none; border-left: none; margin-bottom: 0; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-group-body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item {
background: rgba(0,0,0,0.22) !important; border: 1px solid var(--border) !important; border-radius: 11px;
padding: 10px 10px 10px 52px !important; position: relative; min-height: 56px; align-items: center; gap: 8px;
}
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item::before {
content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 9px; background: rgba(212,175,55,0.10) url("data:image/svg+xml;utf8,") center/16px no-repeat; border: 1px solid rgba(212,175,55,0.25);
}
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-tipo="albaran"]::before { background-image: url("data:image/svg+xml;utf8,"); }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-tipo="factura_pagada"]::before { background-image: url("data:image/svg+xml;utf8,"); }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-credito="1"]::before { background-color: rgba(244,162,97,0.10); border-color: rgba(244,162,97,0.3); }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-title-wrap::after { content: attr(data-sub); display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-credito="1"] .tx-title-wrap::after { color: var(--warning); }
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-credito="0"][data-tipo="factura_pagada"] .tx-title-wrap::after,
html.portada-v2 body:not(.caja-cerrada):not(.viendo-otra) .tx-item[data-credito="0"][data-tipo="albaran"] .tx-title-wrap::after { color: var(--success); }
.mv2-date { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); padding: 2px 4px 8px; }
.mv2-date #mv2-fecha { font-family: 'Playfair Display', Georgia, serif; font-size: 14px; color: var(--text); }
.mv2-estado { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: var(--success); background: rgba(118,179,157,0.12); border-radius: 100px; padding: 3px 8px; }
.mv2-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(0,0,0,0.3); border: 1px solid var(--border-strong); border-radius: 11px; overflow: hidden; }
.mv2-bar > div { padding: 8px 6px; text-align: center; border-right: 1px solid var(--border); }
.mv2-bar > div:last-child { border-right: none; }
.mv2-bar .mv2-t { background: rgba(212,175,55,0.10); }
.mv2-lbl { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 2px; }
.mv2-eur { font-size: 13.5px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv2-eur.mv2-red { color: var(--error); } .mv2-eur.mv2-wh { color: var(--text); }
.mv2-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px 0; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: var(--text-subtle); }
.mv2-line #mv2-cats { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv2-fab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 30px; border: 1px solid transparent; font-family: inherit; font-weight: 800; font-size: 11.5px; letter-spacing: .9px; text-transform: uppercase; box-shadow: 0 8px 20px rgba(0,0,0,.4); cursor: pointer; }
.mv2-fab span { font-size: 15px; line-height: 1; }
.mv2-nueva { background: #c9aa41; color: var(--bg-deep); }
.mv2-scan { background: linear-gradient(135deg, #8b6cc7, #6d4fb0); color: #fff; }
.mv2-cerrar { background: var(--bg-card); color: var(--error); border-color: rgba(231,111,81,0.45); }
.mv2-fab:active { transform: translateY(1px); }
}
/* ===== PORTADA MÓVIL "opción 5" (solo hasta 767px; en escritorio no existe) ===== */
#movil-top { display: none; }
@media (max-width: 767px) {
html.portada-v5 #movil-top { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
/* con caja abierta y viendo la de hoy, el panel viejo y el resumen se esconden */
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) .panel-caja,
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) .tx-panel-header,
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) #tx-summary-wrap,
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) .fab-scan,
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) #btn-nueva-transaccion { display: none !important; }
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) .action-buttons { justify-content: center; }
html.portada-v5 body:not(.caja-cerrada):not(.viendo-otra) .action-buttons .open-close-caja { flex: 0 1 auto; min-width: 200px; }
/* caja cerrada o viendo otra: vuelve la pantalla clásica y el panel nuevo se esconde */
html.portada-v5 body.caja-cerrada #movil-top, html.portada-v5 body.viendo-otra #movil-top { display: none; }
html.portada-v5 .panel-tx { padding-top: 10px; }
.mt-r1 { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; }
.mt-info { min-width: 0; }
.mt-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-big { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 3px; }
.mt-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.mt-sub b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-sub .mt-red { color: var(--error); }
.mt-ring { --pct: 0%; width: 64px; height: 64px; border-radius: 50%; border: none; padding: 0; cursor: pointer; font-family: inherit;
background: conic-gradient(var(--accent) 0 var(--pct), rgba(245,232,211,0.14) var(--pct) 100%); display: grid; place-items: center; }
.mt-ring span { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-pub); display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1.15; color: var(--text); text-align: center; letter-spacing: .3px; }
.mt-ring.mt-ring-ok span { color: var(--success); }
.mt-quick { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.mt-a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 8px; border-radius: 11px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.mt-nueva { background: #c9aa41; color: var(--bg-deep); }
.mt-scan { background: linear-gradient(135deg, #8b6cc7, #6d4fb0); color: #fff; }
.mt-a:active { transform: translateY(1px); filter: brightness(1.08); }
.mt-plus, .mt-star { font-size: 15px; line-height: 1; }
}
/* Botones de las listas: icono de línea, mismo tamaño en todas las filas */
.admin-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; }
.admin-icon-btn svg { display: block; }
#modal-reports .modal:has(#report-content:not(.hidden)) .report-empty { display: none; }
.admin-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-icon-btn {
background: transparent; border: none; cursor: pointer;
padding: 6px 8px; font-size: 14px; color: var(--text-subtle);
border-radius: 8px; transition: all 0.15s;
}
.admin-icon-btn:hover { background: rgba(245,232,211,0.08); color: var(--text); }
.admin-icon-btn.danger:hover { background: rgba(231,111,81,0.12); color: var(--error); }
.admin-empty {
text-align: center; padding: 40px 20px; color: var(--text-subtle); font-size: 13px;
}
/* Categoría chips for proveedores (multi-select) */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.cat-chip {
padding: 8px 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--border);
border-radius: 100px; font-size: 12px; color: var(--text-muted); cursor: pointer;
font-weight: 600; letter-spacing: 0.3px; transition: all 0.15s; user-select: none;
}
.cat-chip.selected {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.cat-chip:hover { border-color: var(--accent); }
/* === REPORTS MODAL === */
/* Picker de periodo — mismo lenguaje que las pestañas de Administración:
fila segmentada compacta. El header (título + ✕) es el que queda
sticky; el picker scrollea con el contenido. */
.report-period-picker {
display: flex; flex-wrap: wrap; align-items: center;
gap: 3px; padding: 4px;
background: rgba(0,0,0,0.25); border: 1px solid var(--border);
border-radius: 12px; margin-bottom: 12px;
}
/* Fechas del "Personalizado" en su PROPIA línea bajo los chips */
.report-custom-range { flex-basis: 100%; }
/* Móvil: los dos inputs de fecha en UNA fila con la flecha en medio */
@media (max-width: 540px) {
.report-custom-range.active {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
}
.report-custom-range .form-input {
flex: 1 1 0;
min-width: 0;
max-width: none;
padding: 10px 8px;
font-size: 14px;
}
}
.report-period-btn {
flex: 1 1 auto;
padding: 9px 8px; background: transparent; border: none;
border-radius: 8px; font-size: 10.5px; color: var(--text-muted); cursor: pointer;
font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
transition: all 0.15s; user-select: none; white-space: nowrap;
font-family: inherit;
}
.report-period-btn.active {
background: var(--accent-soft); color: var(--accent);
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35) inset;
}
.report-period-btn:hover { color: var(--text); background: rgba(245,232,211,0.04); }
.report-period-btn.active:hover { color: var(--accent); background: var(--accent-soft); }
/* ✕ dentro de la fila del picker — siempre visible al scrollear */
.report-period-picker .modal-close {
position: static;
width: 30px; height: 30px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
margin-left: 2px;
box-shadow: none;
}
.report-custom-range {
display: none; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.report-custom-range.active { display: flex; }
.report-custom-range .form-input { padding: 8px 12px; font-size: 13px; max-width: 150px; }
.report-actions {
display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0;
border-top: 1px solid var(--border); margin-top: 18px;
}
.report-actions .btn { flex: 1; min-width: 140px; }
/* SIN scroll interno: el informe fluye en el scroll del modal para que
la fila sticky de periodos se enganche arriba (como en Administración). */
.report-content {
padding-right: 4px;
}
/* Banda horizontal de chips de periodo — scrollea lateral si no caben;
la ✕ queda fuera de la banda, SIEMPRE en la misma línea a la derecha. */
.report-period-scroll {
display: flex;
align-items: center;
gap: 3px;
flex: 1 1 0;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.report-period-scroll::-webkit-scrollbar { display: none; }
.report-section {
background: rgba(0,0,0,0.20); border: 1px solid var(--border);
border-radius: 12px; padding: 16px; margin-bottom: 14px;
}
.report-section-title {
font-size: 11px; letter-spacing: 2px; color: var(--accent);
font-weight: 700; text-transform: uppercase; margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.report-row {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; font-size: 13px;
}
.report-row + .report-row { border-top: 1px solid rgba(245,232,211,0.06); }
.report-row.subtotal {
padding: 12px 0 8px; font-weight: 700; font-size: 14px;
border-top: 2px solid var(--border);
}
.report-row.highlight {
padding: 12px 14px; margin-top: 10px;
background: var(--accent-soft); border-radius: 10px;
border-top: none;
}
.report-row.highlight .report-label { color: var(--text); font-weight: 700; }
.report-row.highlight .report-value { color: var(--accent); font-size: 16px; }
.report-label { color: var(--text-muted); }
.report-value {
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text);
}
.report-value.pos { color: #2a8964; }
.report-value.neg { color: var(--error); }
.report-value.warn { color: var(--warning); }
.report-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px; margin-bottom: 14px;
}
.report-card {
padding: 14px; background: rgba(0,0,0,0.25);
border: 1px solid var(--border); border-radius: 10px;
}
.report-card-label {
font-size: 10px; letter-spacing: 1.5px; color: var(--text-subtle);
text-transform: uppercase; font-weight: 700; margin-bottom: 6px;
}
.report-card-value {
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 16px;
font-weight: 700; color: var(--text);
}
.report-card-value.accent { color: var(--accent); font-size: 18px; }
.report-card-sub {
font-size: 11px; color: var(--text-subtle); margin-top: 4px;
}
.report-empty {
text-align: center; padding: 40px 20px; color: var(--text-subtle); font-size: 13px;
}
.report-mini-tag {
display: inline-block; padding: 1px 7px; border-radius: 100px;
font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
background: rgba(212,175,55,0.12); color: var(--accent);
}
.report-mini-tag.danger { background: rgba(231,111,81,0.15); color: var(--error); }
.report-mini-tag.success { background: rgba(42,137,100,0.15); color: #4ea882; }
.enc-tag {
display: inline-block; padding: 2px 8px; border-radius: 100px;
font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.enc-tag.admin { background: rgba(212,175,55,0.18); color: var(--accent); }
.enc-tag.encargado { background: rgba(120,140,160,0.18); color: #a4b6c7; }
.enc-tag.encargado_proveedores { background: rgba(110,170,140,0.18); color: #8fc1a7; }
.enc-tag.inactivo { background: rgba(231,111,81,0.18); color: var(--error); }
.enc-tag.you { background: rgba(212,175,55,0.10); color: var(--text-muted); border: 1px dashed var(--accent); }
/* Componentes editor (for bandas) */
.componentes-editor {
display: flex; flex-direction: column; gap: 6px; padding: 4px 0;
}
.componente-row {
display: flex; gap: 8px; align-items: center;
padding: 8px; background: rgba(0,0,0,0.18); border-radius: 8px;
}
.componente-row .form-input { padding: 8px 10px; font-size: 13px; }
.componente-row .form-select { padding: 8px 10px; font-size: 13px; }
.componente-remove {
background: transparent; border: none; color: var(--error);
cursor: pointer; padding: 4px 8px; font-size: 16px;
}
/* Toggle switch for boolean fields */
.toggle-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
}
.toggle-row-label { color: var(--text); font-size: 14px; font-weight: 500; }
.toggle-row-hint { color: var(--text-subtle); font-size: 11px; margin-top: 2px; }
.toggle {
position: relative; width: 46px; height: 26px;
background: rgba(0,0,0,0.4); border: 1px solid var(--border);
border-radius: 100px; cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.toggle::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; background: var(--text-muted);
border-radius: 50%; transition: all 0.2s;
}
.toggle.on { background: var(--accent-soft); border-color: var(--accent); }
.toggle.on::after { left: 22px; background: var(--accent); }
/* ========================================== */
/* LECTURAS X (lecturas intermedias del TPV) */
/* ========================================== */
.lectura-x-empty {
padding: 14px; text-align: center; color: var(--text-subtle); font-size: 13px;
}
/* Boton con badge en el header (📋 + progreso 2/4) */
.icon-btn-badge {
width: auto !important; padding: 0 10px !important;
gap: 6px;
}
.icon-btn-badge .icon-btn-badge-text {
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 700; color: var(--accent);
letter-spacing: 0.4px;
}
/* Lista del modal overview (Lecturas X del dia) */
.lecturas-x-overview-list {
display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.lectura-x-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(0,0,0,0.18);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
color: var(--text);
font-family: inherit;
transition: all 0.15s;
text-align: left;
}
.lectura-x-row:hover {
border-color: var(--accent); background: rgba(212,175,55,0.05);
}
.lectura-x-row:disabled {
cursor: not-allowed; opacity: 0.55;
}
.lectura-x-row:disabled:hover {
border-color: var(--border); background: rgba(0,0,0,0.18);
}
.lectura-x-row.suggested {
border-color: var(--accent);
background: rgba(212,175,55,0.10);
}
.lectura-x-row.done {
border-color: rgba(46,160,100,0.45);
background: rgba(46,160,100,0.07);
}
.lectura-x-row .row-icon {
font-size: 22px; line-height: 1; width: 32px; text-align: center;
}
.lectura-x-row .row-info { min-width: 0; }
.lectura-x-row .row-title {
font-size: 14px; font-weight: 700; color: var(--text);
letter-spacing: 0.3px;
}
.lectura-x-row.done .row-title { color: rgba(120,200,150,1); }
.lectura-x-row .row-meta {
font-size: 11px; color: var(--text-subtle);
margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap;
}
.lectura-x-row .row-amount {
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
font-size: 14px; font-weight: 700; color: var(--accent);
text-align: right; min-width: 90px;
}
.lectura-x-row.pending .row-amount {
color: var(--text-muted); font-weight: normal; font-size: 12px;
}
/* ========================================== */
/* FLATPICKR — tema oscuro/dorado para la app */
/* ========================================== */
.flatpickr-calendar {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
font-family: 'Manrope', system-ui, sans-serif;
color: var(--text);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-color: transparent; }
.flatpickr-months {
padding-top: 6px;
}
.flatpickr-month {
background: transparent !important;
color: var(--text) !important;
border-radius: 12px 12px 0 0;
height: 42px;
}
.flatpickr-current-month {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 15px;
color: var(--text) !important;
padding-top: 6px;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
color: var(--text) !important;
font-weight: 700;
}
.flatpickr-current-month input.cur-year { font-family: inherit; }
.flatpickr-current-month .numInputWrapper:hover {
background: rgba(212,175,55,0.10);
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--accent); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--accent); }
.flatpickr-monthDropdown-months {
background: var(--bg-card);
color: var(--text);
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background: var(--bg-card);
}
.flatpickr-prev-month, .flatpickr-next-month {
color: var(--text-muted) !important;
fill: var(--text-muted) !important;
padding: 6px 10px !important;
}
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg {
fill: var(--accent) !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text-muted); }
.flatpickr-weekdays {
background: transparent;
}
span.flatpickr-weekday {
background: transparent;
color: var(--text-subtle) !important;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.flatpickr-day {
color: var(--text);
border-radius: 8px;
max-width: 38px; height: 36px; line-height: 36px;
font-size: 13px;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
background: rgba(212,175,55,0.12);
border-color: transparent;
color: var(--text);
}
.flatpickr-day.today {
border-color: var(--accent);
color: var(--accent);
font-weight: 700;
}
.flatpickr-day.today:hover {
background: var(--accent);
color: var(--bg);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
font-weight: 700;
box-shadow: none;
}
.flatpickr-day.inRange {
background: rgba(212,175,55,0.15);
border-color: rgba(212,175,55,0.15);
color: var(--text);
box-shadow: -5px 0 0 rgba(212,175,55,0.15), 5px 0 0 rgba(212,175,55,0.15);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: var(--text-muted);
opacity: 0.35;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--text-muted);
opacity: 0.5;
}
/* Selector de hora (time picker) */
.flatpickr-time {
border-top: 1px solid var(--border) !important;
background: transparent;
}
.flatpickr-time input {
color: var(--text) !important;
background: transparent !important;
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 16px;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
background: rgba(212,175,55,0.08) !important;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
color: var(--accent);
font-weight: 700;
}
.flatpickr-time .arrowUp:after { border-bottom-color: var(--accent) !important; }
.flatpickr-time .arrowDown:after { border-top-color: var(--accent) !important; }
/* El input "alt" que muestra la fecha bonita en español */
.flatpickr-input.form-input,
.form-input.flatpickr-input {
background: rgba(0,0,0,0.32);
}
/* iPhone: flatpickr crea un nativo (.flatpickr-mobile) que no hereda el ancho
y se salía de la ventana "Cambiar fecha" (Robert, 5-sep-2026). */
.flatpickr-mobile, input.flatpickr-mobile, .form-group input[type="date"], .form-group input[type="time"] {
display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
-webkit-appearance: none; appearance: none;
}
/* ========================================== */
/* MODAL CONFIRM (reemplaza confirm() nativo) */
/* ========================================== */
.confirm-message {
color: var(--text);
font-size: 14px;
line-height: 1.55;
white-space: pre-wrap;
margin-bottom: 18px;
padding: 14px 16px;
background: rgba(0,0,0,0.20);
border: 1px solid var(--border);
border-radius: 10px;
}
#modal-confirm.is-danger .confirm-message {
border-color: rgba(231,111,81,0.35);
background: rgba(231,111,81,0.06);
}
#modal-confirm.is-warning .confirm-message {
border-color: rgba(244,162,97,0.35);
background: rgba(244,162,97,0.06);
}
/* ========================================== */
/* EXCEL IMPORT PREVIEW (subir XLSX) */
/* ========================================== */
.excel-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(0,0,0,0.18);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 6px;
}
.excel-row.is-new {
border-color: rgba(118,179,157,0.40);
background: rgba(118,179,157,0.06);
}
.excel-row.is-update {
border-color: rgba(244,162,97,0.40);
background: rgba(244,162,97,0.06);
}
.excel-row.is-error {
border-color: rgba(231,111,81,0.45);
background: rgba(231,111,81,0.07);
}
.excel-row.is-filtered {
border-color: rgba(158,181,169,0.35);
background: rgba(158,181,169,0.05);
opacity: 0.65;
}
.excel-row .excel-row-tag {
font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
padding: 4px 8px; border-radius: 8px; text-transform: uppercase;
white-space: nowrap;
}
.excel-row.is-new .excel-row-tag { background: var(--success); color: var(--bg-deep); }
.excel-row.is-update .excel-row-tag { background: var(--warning); color: var(--bg-deep); }
.excel-row.is-error .excel-row-tag { background: var(--error); color: white; }
.excel-row.is-filtered .excel-row-tag { background: var(--text-muted); color: var(--bg-deep); }
/* Toggle de 3 vistas (Activos / Archivados / Papelera) en la lista de admin */
/* Filtro Activos/Archivados/Papelera — fino y discreto */
.view-mode-toggle {
display: flex; gap: 3px;
padding: 3px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 10px;
}
.view-mode-btn {
flex: 1; padding: 5px 8px;
background: transparent; border: none;
color: var(--text-muted);
font-family: inherit; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase;
cursor: pointer; border-radius: 8px;
transition: all 0.15s;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
white-space: nowrap;
}
.view-mode-btn:hover { color: var(--text); background: rgba(245,232,211,0.04); }
.view-mode-btn.active {
background: var(--accent-soft); color: var(--accent);
}
.view-mode-btn[data-view-mode="archived"].active {
background: rgba(244,162,97,0.15); color: var(--warning);
}
.view-mode-btn[data-view-mode="deleted"].active {
background: rgba(231,111,81,0.15); color: var(--error);
}
.view-mode-btn .vm-count {
font-size: 9.5px; opacity: 0.7; font-weight: 700;
padding: 0px 5px; border-radius: 8px; background: rgba(0,0,0,0.20);
}
.view-mode-btn.active .vm-count {
background: rgba(0,0,0,0.25); opacity: 0.85;
}
/* Banner "ver/ocultar archivados" en la lista de admin (legacy, mantenido por si se usa en otro sitio) */
.archived-banner {
padding: 8px 12px;
margin-bottom: 8px;
background: rgba(245,232,211,0.04);
border: 1px dashed var(--border);
border-radius: 8px;
color: var(--text-muted);
font-size: 12px;
letter-spacing: 0.3px;
text-align: center;
cursor: pointer;
transition: all 0.15s;
}
.archived-banner:hover {
color: var(--text);
border-color: var(--text-muted);
background: rgba(245,232,211,0.07);
}
.archived-banner.deleted-banner {
background: rgba(231,111,81,0.05);
border-color: rgba(231,111,81,0.30);
color: rgba(231,111,81,0.80);
}
.archived-banner.deleted-banner:hover {
color: var(--error);
border-color: var(--error);
background: rgba(231,111,81,0.10);
}
.excel-row .excel-row-info { min-width: 0; }
.excel-row .excel-row-title {
font-size: 14px; font-weight: 600; color: var(--text);
}
.excel-row .excel-row-meta {
font-size: 11px; color: var(--text-subtle); margin-top: 2px;
}
.excel-row .excel-row-line {
font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
font-size: 11px; color: var(--text-subtle);
}
/* ========================================== */
/* FOTOS DE TRANSACCIONES (albarán/factura) */
/* ========================================== */
.tx-fotos-strip {
display: flex; flex-wrap: wrap; gap: 8px;
min-height: 80px;
}
.tx-foto-thumb {
position: relative;
width: 72px; height: 72px;
border-radius: 8px; overflow: hidden;
border: 1px solid var(--border-strong);
background: rgba(0,0,0,0.30);
}
.tx-foto-thumb img {
width: 100%; height: 100%; object-fit: cover;
cursor: zoom-in; display: block;
}
.tx-foto-thumb .tx-foto-remove {
position: absolute; top: 2px; right: 2px;
width: 20px; height: 20px;
border-radius: 50%; border: none;
background: rgba(0,0,0,0.75); color: white;
font-size: 14px; font-weight: 700; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.tx-foto-thumb .tx-foto-remove:hover {
background: var(--error);
}
.tx-foto-thumb .tx-foto-badge {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 1px 4px;
background: rgba(212,175,55,0.85); color: var(--bg-deep);
font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
text-align: center; text-transform: uppercase;
}
.tx-foto-add {
width: 72px; height: 72px;
border-radius: 8px;
border: 2px dashed var(--border-strong);
background: rgba(0,0,0,0.15);
color: var(--text-muted);
cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
font-family: inherit;
transition: all 0.15s;
}
.tx-foto-add:hover {
border-color: var(--accent); color: var(--accent);
background: rgba(212,175,55,0.05);
}
.tx-foto-add .tx-foto-add-icon { font-size: 22px; line-height: 1; }
.tx-foto-add .tx-foto-add-text { font-size: 10px; letter-spacing: 0.3px; }
/* === Visor de fotos FULLSCREEN — pantalla completa con toolbar === */
.foto-viewer-overlay {
padding: 0 !important;
background: rgba(0,0,0,0.98) !important;
backdrop-filter: none !important;
align-items: stretch !important;
justify-content: stretch !important;
}
.foto-viewer-modal {
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
background: #000 !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: flex; flex-direction: column;
position: relative;
margin: 0 !important;
}
.foto-viewer-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: max(12px, env(safe-area-inset-top)) 14px 12px;
background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
position: absolute;
top: 0; left: 0; right: 0;
z-index: 10;
color: white;
font-size: 13px;
}
.foto-viewer-toolbar #foto-viewer-info {
flex: 1;
text-align: center;
color: rgba(255,255,255,0.85);
font-size: 12px;
}
.foto-viewer-tool-group {
display: flex; gap: 8px;
}
a.foto-viewer-tool,
button.foto-viewer-tool {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.15);
color: white;
font-size: 18px;
text-decoration: none;
cursor: pointer;
transition: background 0.12s;
}
a.foto-viewer-tool:hover,
button.foto-viewer-tool:hover {
background: rgba(255,255,255,0.22);
}
/* ✕ esquina top-right — fixed sobre la imagen, no parte del toolbar.
En desktop ancho se alinea cerca del contenido (no al borde del viewport)
igual que el FAB de IA, para no quedar muy lejos de la foto. */
.foto-viewer-close-corner {
position: absolute !important;
top: max(12px, env(safe-area-inset-top)) !important;
right: max(14px, calc(50% - 420px)) !important;
z-index: 20 !important;
}
/* Cursor pointer en el stage = pista visual de que click fuera de la
imagen cierra el visor */
.foto-viewer-stage { cursor: zoom-out; }
.foto-viewer-stage img,
.foto-viewer-stage > button,
.foto-viewer-stage .foto-viewer-pdf-wrap { cursor: default; }
.foto-viewer-stage {
flex: 1; min-height: 0;
display: flex; align-items: center; justify-content: center;
position: relative;
padding: 0;
}
.foto-viewer-stage img {
max-width: 100vw;
max-height: 100dvh;
width: auto; height: auto;
object-fit: contain;
border-radius: 0;
/* IMPORTANTE: NO user-select:none ni touch-callout:none — el usuario
necesita poder mantener pulsada la imagen para "Guardar en Fotos". */
-webkit-touch-callout: default;
-webkit-user-select: auto;
user-select: auto;
/* Zoom JS controla touch — pinch (2 dedos) y pan (1 dedo cuando zoom>1). */
touch-action: none;
transform-origin: center center;
will-change: transform;
}
/* Hint discreto abajo: "Mantén pulsada para guardar" */
.foto-viewer-hint {
position: absolute;
bottom: max(14px, env(safe-area-inset-bottom));
left: 0; right: 0;
text-align: center;
font-size: 11px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.4px;
pointer-events: none;
padding: 8px 14px;
background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
.foto-viewer-spacer { width: 38px; flex-shrink: 0; }
.foto-viewer-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
color: white;
border: 1px solid rgba(255,255,255,0.3);
font-size: 28px; font-weight: 700; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
z-index: 25;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
/* Asegura que ambas se vean igual encima de cualquier contenido */
isolation: isolate;
}
.foto-viewer-nav:hover { background: rgba(255,255,255,0.22); }
.foto-viewer-prev { left: 12px; }
.foto-viewer-next { right: 12px; }
.foto-viewer-footer {
padding: 12px 16px;
background: rgba(0,0,0,0.50);
color: var(--text-muted);
font-size: 12px; text-align: center;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* === Boton "Escanear con IA" en formulario de albaran/factura === */
.btn-scan-ai {
width: 100%;
margin-top: 10px;
padding: 12px 16px;
background: linear-gradient(135deg, #4a3a6e 0%, #6b4f9c 50%, #4a3a6e 100%);
color: #f5e8ff;
border: 1px solid rgba(167, 139, 250, 0.40);
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all 0.18s;
box-shadow: 0 2px 6px rgba(107, 79, 156, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-scan-ai:hover:not(:disabled) {
background: linear-gradient(135deg, #5a4a7e 0%, #7b5fac 50%, #5a4a7e 100%);
box-shadow: 0 4px 10px rgba(107, 79, 156, 0.40), inset 0 1px 0 rgba(255,255,255,0.12);
transform: translateY(-1px);
}
.btn-scan-ai:disabled { opacity: 0.6; cursor: wait; }
.btn-scan-ai-icon { font-size: 18px; }
/* === Estado del OCR (procesando / ok / error) === */
.ocr-status {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text-muted);
}
.ocr-status-info { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.30); color: #c7ddff; }
.ocr-status-ok { background: rgba(74, 222, 128, 0.10); border-color: rgba(74, 222, 128, 0.30); color: #d4f5dd; }
.ocr-status-bad { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.30); color: #f7d3d3; }
.ocr-conf-ok { color: #4ade80; font-weight: 600; }
.ocr-conf-warn { color: #fbbf24; font-weight: 600; }
.ocr-conf-bad { color: #f87171; font-weight: 600; }
.ocr-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #c7ddff;
border-radius: 50%;
animation: ocr-spin 0.8s linear infinite;
margin-right: 6px;
vertical-align: -1px;
}
@keyframes ocr-spin { to { transform: rotate(360deg); } }
/* === Campos auto-rellenados por la IA: borde amarillo "revisame" === */
.field-auto-filled {
border-color: #fbbf24 !important;
background: rgba(251, 191, 36, 0.06) !important;
box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.30) inset !important;
}
/* Aviso "tipo de transacción equivocado" tras el escaneo (crédito vs efectivo) */
.ocr-tipo-warn {
margin-top: 10px;
padding: 10px 12px;
background: rgba(255, 122, 58, 0.10);
border: 1px solid rgba(255, 122, 58, 0.35);
border-radius: 8px;
color: #ffc09a;
font-size: 12.5px;
line-height: 1.5;
}
.ocr-tipo-warn strong { color: #ffd6b8; }
/* === Panel "Crear proveedor" desde el OCR === */
.ocr-create-prov {
margin-top: 10px;
padding: 12px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 8px;
color: #fef3c7;
}
.ocr-create-prov-title {
font-weight: 700;
font-size: 13px;
margin-bottom: 6px;
}
.ocr-create-prov-body {
font-size: 13px;
margin-bottom: 10px;
line-height: 1.4;
}
.ocr-create-prov-body small {
color: rgba(254, 243, 199, 0.70);
font-style: italic;
}
.ocr-create-prov-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.ocr-create-prov-actions .btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.ocr-create-prov-done {
font-size: 13px;
color: #4ade80;
}
/* === MOBILE: aprovechar todo el ancho disponible en la lista de tx === */
@media (max-width: 540px) {
.app-shell { padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
.panel { padding: 14px 10px; border-radius: 10px; }
.tx-item { padding: 12px 10px; gap: 10px; border-radius: 8px; }
.tx-icon { width: 36px; height: 36px; font-size: 18px; }
.tx-title { font-size: 13.5px; }
.tx-amount { font-size: 16px; }
/* Acciones siempre visibles en móvil (no hay hover), compactas, en línea
con los pills (no en fila aparte). */
.tx-actions {
opacity: 1;
flex-direction: row;
gap: 4px;
flex-shrink: 0;
}
.tx-action-btn { width: 28px; height: 28px; font-size: 13px; }
/* Pills más compactos para que quepan junto a los botones */
.tx-cat-pill, .tx-method-pill {
font-size: 9px;
padding: 2px 6px;
letter-spacing: 0.5px;
}
.tx-meta-row, .tx-pills-row { gap: 6px; }
/* Pills + importe: rompen la columna del icono para alinearse con el
borde izquierdo del card y aprovechar toda la anchura. */
.tx-bottom-row {
gap: 8px;
margin-left: -46px;
}
}
@media (max-width: 380px) {
.app-shell { padding: 6px; }
.panel { padding: 12px 8px; }
.tx-item { padding: 10px 8px; gap: 8px; }
.tx-icon { width: 32px; height: 32px; font-size: 16px; }
.tx-amount { font-size: 15px; }
}
/* === MOBILE: modal flotante centrado, backdrop oscuro tipo iOS === */
@media (max-width: 540px) {
.modal-overlay {
padding: 16px;
align-items: center;
justify-content: center;
/* Fondo MAS oscuro para que el "espacio" detrás del modal se sienta
como ambiente, no como pantalla vacía */
background: rgba(0,0,0,0.88);
backdrop-filter: blur(12px);
}
.modal {
width: 100%;
max-width: 100%;
max-height: 88vh;
max-height: 88dvh;
border-radius: 14px;
padding: 18px 14px;
margin-bottom: env(safe-area-inset-bottom);
}
.modal-header { margin-bottom: 12px; }
.modal-title { font-size: 17px; }
}
/* Si el contenido del modal cabe entero, desactivamos el scroll interno
para que iOS Safari no haga rubber-band sin motivo. JS añade la clase
en openModal() midiendo scrollHeight vs clientHeight. */
.modal.no-scroll-needed {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
/* === Categoria selector dentro del panel "Crear proveedor" === */
.ocr-create-prov-cat-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.ocr-create-prov-cat-label {
font-size: 13px;
color: #fef3c7;
font-weight: 600;
flex-shrink: 0;
}
.ocr-create-prov-cat-select {
flex: 1;
padding: 8px 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(251, 191, 36, 0.40);
border-radius: 8px;
color: #fef3c7;
font-size: 13px;
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 28px;
}
.ocr-create-prov-cat-select option {
background: var(--bg-deeper);
color: #fef3c7;
}
/* === Menú de acciones de transacción (botón ⋮ + dropdown) === */
.tx-menu-wrap {
position: relative;
flex-shrink: 0;
}
.tx-menu-btn {
width: 36px;
height: 36px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--text-subtle);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
line-height: 1;
padding: 0;
transition: all 0.12s;
}
.tx-menu-btn:hover {
color: var(--text);
background: rgba(255,255,255,0.06);
border-color: var(--border);
}
.tx-menu-dropdown {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 50;
min-width: 150px;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
overflow: hidden;
padding: 4px;
animation: txMenuIn 0.12s ease;
}
.tx-menu-dropdown.hidden { display: none; }
/* Si el dropdown no cabe abajo, se abre hacia arriba (flip vertical) */
.tx-menu-dropdown.drop-up {
top: auto;
bottom: calc(100% + 4px);
}
/* Header del modal: grupo título + acciones, X separado a la derecha */
.modal-title-group {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.modal-icon-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(245,232,211,0.05);
border: 1px solid rgba(245,232,211,0.10);
color: var(--text);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.modal-icon-btn:hover {
background: rgba(245,232,211,0.10);
border-color: rgba(245,232,211,0.25);
}
.modal-icon-btn svg { display: block; }
/* Botón ⋮ del header del modal Detalles — visible pero borde casi invisible */
.tx-details-menu-btn {
width: 30px; height: 30px;
font-size: 22px;
line-height: 1;
font-weight: 700;
padding: 0 0 5px 0;
background: rgba(245,232,211,0.025);
border: 1px solid rgba(245,232,211,0.04);
color: var(--text);
opacity: 1;
}
.tx-details-menu-btn:hover {
background: rgba(245,232,211,0.08);
border-color: rgba(245,232,211,0.12);
}
/* Wrapper relativo alrededor del ⋮ — para que el dropdown se ancle a él */
.tx-details-menu-wrap { position: relative; display: inline-flex; }
/* Dropdown ⋮ del header del modal (Editar/Eliminar) */
.tx-details-menu-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 100;
min-width: 170px;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%);
border: 1px solid var(--border-strong);
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,0.45);
overflow: hidden;
padding: 5px;
animation: txMenuIn 0.12s ease;
}
.tx-details-menu-dropdown.hidden { display: none; }
.tx-details-menu-item {
width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
background: transparent;
border: none;
color: var(--text);
font-family: inherit;
font-size: 14px;
text-align: left;
border-radius: 8px;
cursor: pointer;
transition: background 0.12s;
}
.tx-details-menu-item:hover { background: rgba(245,232,211,0.07); }
.tx-details-menu-item.is-danger { color: #ff6b6b; }
.tx-details-menu-item.is-danger:hover { background: rgba(255,80,80,0.10); }
.tx-details-menu-item-ico { font-size: 14px; line-height: 1; }
@keyframes txMenuIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.tx-menu-item {
width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.tx-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.tx-menu-item-danger {
color: #f87171;
}
.tx-menu-item-danger:hover {
background: rgba(248, 113, 113, 0.10);
}
.tx-menu-item-icon { font-size: 14px; }
/* === Título de transacción: tipo arriba pequeño + sujeto grande === */
.tx-title-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tx-type-label {
font-size: 10px;
letter-spacing: 1.2px;
color: var(--text-subtle);
font-weight: 600;
text-transform: uppercase;
line-height: 1.1;
}
/* === Badge "añadido tarde" — icono SVG calendario, color naranja para
diferenciarlo de la banda amber de "ALBARANES A CRÉDITO" === */
.tx-late-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
background: rgba(255, 122, 58, 0.14);
border: 1px solid rgba(255, 122, 58, 0.45);
border-radius: 50%;
color: #ff8a4c;
cursor: help;
line-height: 1;
flex-shrink: 0;
}
.tx-late-badge svg { display: block; }
/* === FAB único: "Escanear con IA" (atajo rápido bottom-right) ===
En desktop se coloca pegadito al borde derecho del contenido (max-width
880px) — FAB justo a la línea, casi tocando. En móvil overlap normal.
Fórmula: 50% - 440 (borde contenido) - 58 (ancho FAB) = 50% - 498px. */
.fab-scan {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
right: max(20px, calc(50% - 558px));
width: 58px; height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #5a4080 0%, #7b5fac 50%, #5a4080 100%);
border: 1px solid rgba(167, 139, 250, 0.45);
color: #f5e8ff;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
0 8px 24px rgba(107, 79, 156, 0.55),
0 3px 8px rgba(0,0,0,0.30);
z-index: 90;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
padding: 0;
}
.fab-scan:hover:not(:disabled) {
transform: translateY(-2px) scale(1.04);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 12px 32px rgba(107, 79, 156, 0.70),
0 4px 10px rgba(0,0,0,0.35);
}
.fab-scan:active:not(:disabled) {
transform: translateY(0) scale(0.98);
transition-duration: 0.08s;
}
.fab-scan:disabled { opacity: 0.7; cursor: wait; }
.fab-scan-icon {
display: block;
animation: fabPulse 2.5s ease-in-out infinite;
}
@keyframes fabPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* Esconder el FAB cuando hay un modal abierto (para no superponerlo) */
body.modal-open .fab-scan { opacity: 0; pointer-events: none; transform: scale(0.8); }
/* Esconder antes de que la app esté lista (login, init, etc.) */
body:not(.app-ready) .fab-scan { display: none; }
@media (max-width: 540px) {
.fab-scan {
width: 54px; height: 54px;
bottom: calc(14px + env(safe-area-inset-bottom));
right: 14px;
font-size: 24px;
}
}
/* === Modal "Ver detalles de transacción" — versión backup cards-with-emojis === */
.tx-details-warning {
background: rgba(251, 191, 36, 0.10);
border: 1px solid rgba(251, 191, 36, 0.35);
color: #fef3c7;
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 16px;
}
/* ========================================================
MODAL DETALLES — versión COMPACTA (entra en una vista
sin scroll). Pill arriba (color del grupo), hero
(proveedor + categoría + importe), chips horizontales,
attach pill abajo.
======================================================== */
/* Typeline — solo "ALBARÁN/FACTURA/…" + dot color. Mucho más sutil que pill. */
.tx-d-typeline {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--g-accent, #ddd);
margin-bottom: 8px;
}
.tx-d-typeline-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--g-accent, #888);
box-shadow: 0 0 6px rgba(var(--g-rgb, 138,138,138), 0.7);
flex-shrink: 0;
}
.tx-d-typeline-label { font-weight: 700; }
.tx-d-typeline.g-credit { --g-rgb: 212,175,55; --g-accent: #d4af37; }
.tx-d-typeline.g-cash { --g-rgb: 76,175,125; --g-accent: #4caf7d; }
.tx-d-typeline.g-staff { --g-rgb: 109,143,199; --g-accent: #6d8fc7; }
.tx-d-typeline.g-music { --g-rgb: 179,136,224; --g-accent: #b388e0; }
.tx-d-typeline.g-other { --g-rgb: 138,138,138; --g-accent: #aaa; }
/* Hero: proveedor + importe en la MISMA línea (ahorra espacio) */
.tx-d-hero {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 0 0 12px;
border-bottom: 1px solid rgba(245,232,211,0.08);
margin-bottom: 12px;
}
.tx-d-subject {
font-size: 21px;
font-weight: 800;
letter-spacing: 0.4px;
color: var(--text);
line-height: 1.15;
word-break: break-word;
flex: 1 1 auto;
min-width: 0;
}
.tx-d-amount {
font-family: 'Manrope', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 26px;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.5px;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 380px) {
.tx-d-subject { font-size: 18px; }
.tx-d-amount { font-size: 22px; }
}
/* Chips: grid 2 col, look pulido tipo Linear/Vercel */
.tx-d-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(245,232,211,0.06);
border-radius: 10px;
padding: 6px;
margin-bottom: 12px;
}
.tx-d-chip {
background: rgba(255,255,255,0.02);
border-radius: 8px;
padding: 8px 11px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
transition: background 0.15s;
}
.tx-d-chip:hover { background: rgba(255,255,255,0.04); }
/* TIPO banner = full-width sutil arriba de los chips. Solo texto en color
del grupo, sin dot ni borde fuerte. Diferencia mínima pero clara. */
.tx-d-chip.is-tipo {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
background: rgba(var(--g-rgb, 138,138,138), 0.07);
border: none;
border-bottom: 2px solid rgba(var(--g-rgb, 138,138,138), 0.35);
border-radius: 8px;
min-height: 0;
}
.tx-d-chip.is-tipo .tx-d-chip-k { display: none; }
.tx-d-chip.is-tipo.g-credit { --g-rgb: 212,175,55; --g-accent: #d4af37; }
.tx-d-chip.is-tipo.g-cash { --g-rgb: 76,175,125; --g-accent: #4caf7d; }
.tx-d-chip.is-tipo.g-staff { --g-rgb: 109,143,199; --g-accent: #6d8fc7; }
.tx-d-chip.is-tipo.g-music { --g-rgb: 179,136,224; --g-accent: #b388e0; }
.tx-d-chip.is-tipo.g-other { --g-rgb: 138,138,138; --g-accent: #aaa; }
.tx-d-chip.is-tipo .tx-d-chip-v {
color: var(--g-accent, var(--text));
font-weight: 700;
font-size: 12.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: normal;
text-align: center;
}
.tx-d-chip-k {
font-size: 9.5px;
letter-spacing: 0.7px;
color: var(--text-subtle);
opacity: 0.62;
font-weight: 700;
text-transform: uppercase;
}
.tx-d-chip-v {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
}
.tx-d-late {
display: flex;
gap: 6px;
align-items: flex-start;
background: rgba(255, 122, 58, 0.08);
border: 1px solid rgba(255, 122, 58, 0.22);
color: #ffc09a;
padding: 6px 10px;
border-radius: 8px;
font-size: 11px;
line-height: 1.35;
margin-bottom: 10px;
}
.tx-d-late-ico { color: #ff8a4c; font-size: 12px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.tx-d-late strong { color: #ffd6b8; }
.tx-d-notes {
background: rgba(0,0,0,0.20);
border-radius: 8px;
padding: 9px 12px;
font-size: 13px;
color: var(--text);
line-height: 1.45;
margin-bottom: 12px;
border: 1px solid rgba(245,232,211,0.05);
}
.tx-d-notes-label {
display: block;
font-size: 9.5px;
letter-spacing: 0.6px;
color: var(--text-subtle);
opacity: 0.7;
font-weight: 600;
margin-bottom: 3px;
}
/* Adjuntos: thumbnails clickables (cada uno abre ese específico en visor) */
.tx-d-attachments { margin-bottom: 10px; }
.tx-d-attach-head {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
padding: 0 2px;
}
.tx-d-attach-head-label {
font-size: 9.5px;
letter-spacing: 0.8px;
color: var(--text-subtle);
opacity: 0.7;
font-weight: 600;
text-transform: uppercase;
}
.tx-d-attach-head-count {
background: rgba(245,232,211,0.07);
padding: 0px 6px;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
color: var(--text);
}
/* Grid de thumbnails — TODOS iguales y pequeños, CENTRADOS.
Click en uno → abre fullscreen para ver entero. */
.tx-d-attach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 88px);
gap: 8px;
justify-content: center;
}
.tx-d-attach-tile { aspect-ratio: 1 / 1; }
.tx-d-attach-tile {
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
position: relative;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(245,232,211,0.08);
transition: transform 0.12s, border-color 0.12s;
}
.tx-d-attach-tile:hover {
border-color: rgba(245,232,211,0.25);
transform: translateY(-1px);
}
.tx-d-attach-tile.is-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.tx-d-attach-tile.is-pdf {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px;
background: linear-gradient(180deg, rgba(220,40,40,0.10), rgba(120,20,20,0.20));
border-color: rgba(255,80,80,0.25);
}
.tx-d-attach-pdf-ico {
background: #d33;
color: white;
font-weight: 800;
font-size: 10px;
letter-spacing: 0.8px;
padding: 2px 6px;
border-radius: 3px;
margin-bottom: 5px;
}
.tx-d-attach-tile-name {
font-size: 9.5px;
color: var(--text);
text-align: center;
line-height: 1.15;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-word;
}
.tx-d-edited {
font-size: 10.5px;
color: var(--text-subtle);
opacity: 0.55;
text-align: center;
letter-spacing: 0.3px;
}
@media (max-width: 540px) {
.tx-d-subject { font-size: 19px; }
.tx-d-amount { font-size: 28px; }
.tx-d-chips { gap: 6px; }
.tx-d-chip { padding: 6px 9px; }
.tx-d-chip-v { font-size: 12.5px; }
}
/* Cada sección es una tarjeta limpia */
.tx-details-card {
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 10px;
}
.tx-details-card:last-child { margin-bottom: 0; }
/* HEADER: tarjeta resumen tipo factura */
.tx-details-summary {
background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(0,0,0,0.22) 100%);
border-color: rgba(212,175,55,0.18);
padding: 18px 16px;
}
.tx-details-summary-top {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.tx-details-icon-wrap {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
border: 1px solid rgba(212,175,55,0.25);
display: flex; align-items: center; justify-content: center;
}
.tx-details-icon { font-size: 28px; line-height: 1; }
.tx-details-titleblock { flex: 1; min-width: 0; }
.tx-details-type {
font-size: 11px;
letter-spacing: 1.6px;
color: var(--text-subtle);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 4px;
}
.tx-details-subject {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
word-break: break-word;
line-height: 1.25;
}
.tx-details-amount-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.tx-details-amount-label {
font-size: 11px;
letter-spacing: 1.6px;
color: var(--text-subtle);
font-weight: 700;
}
.tx-details-amount {
font-family: 'Manrope', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 28px;
font-weight: 800;
color: var(--accent);
white-space: nowrap;
letter-spacing: -0.5px;
line-height: 1;
}
/* SECTION HEADER con icono emoji */
.tx-details-section-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 1.4px;
color: var(--text-subtle);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 12px;
}
.tx-details-header-ico { font-size: 14px; }
.tx-details-section-count {
margin-left: auto;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-muted);
border-radius: 4px;
padding: 2px 7px;
font-size: 10px;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* GRID 2x para datos clave (mini-cells) */
.tx-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.tx-details-cell {
padding: 10px 12px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tx-details-cell-label {
font-size: 10px;
color: var(--text-subtle);
letter-spacing: 1.1px;
font-weight: 600;
text-transform: uppercase;
}
.tx-details-cell-value {
font-size: 13.5px;
color: var(--text);
font-weight: 600;
word-break: break-word;
}
.tx-details-edited {
font-size: 12.5px;
color: var(--text-muted);
}
@media (max-width: 540px) {
.tx-details-card { padding: 12px 12px; }
.tx-details-summary { padding: 16px 12px; }
.tx-details-icon-wrap { width: 48px; height: 48px; }
.tx-details-icon { font-size: 24px; }
.tx-details-subject { font-size: 16px; }
.tx-details-amount { font-size: 24px; }
.tx-details-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.tx-details-cell { padding: 8px 10px; }
.tx-details-cell-value { font-size: 12.5px; }
}
.tx-details-notes {
background: rgba(0,0,0,0.25);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: var(--text);
line-height: 1.5;
white-space: pre-wrap;
}
.tx-details-fotos {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
padding: 14px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
}
.tx-details-fotos img {
width: 130px; height: 130px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.10);
background: #0a0a0a;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.tx-details-fotos img:hover {
transform: translateY(-2px) scale(1.03);
border-color: var(--accent);
box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
/* Si solo hay UNA foto, la mostramos más grande para destacarla */
.tx-details-fotos:has(img:only-child) img {
width: 220px; height: 220px;
}
@media (max-width: 540px) {
.tx-details-fotos img { width: 110px; height: 110px; }
.tx-details-fotos:has(img:only-child) img { width: 180px; height: 180px; }
}
.tx-details-empty {
font-size: 12px;
color: var(--text-subtle);
font-style: italic;
}
/* === MOBILE: grid 2x2 de mini-cards (estilo dashboard limpio) === */
@media (max-width: 540px) {
.day-cat-strip {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-auto-flow: column;
gap: 6px;
padding: 8px;
background: rgba(0,0,0,0.18);
}
/* Si solo hay 1 o 2 categorías → una sola fila (no dejar huecos) */
.day-cat-strip[data-count="1"],
.day-cat-strip[data-count="2"] {
grid-template-rows: auto;
grid-auto-flow: row;
}
.day-cat-strip[data-count="1"] {
grid-template-columns: 1fr;
}
.day-cat-strip .cat-strip-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 9px 11px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.day-cat-strip .cat-strip-left {
display: inline-flex; align-items: center; gap: 6px;
min-width: 0;
}
.day-cat-strip .cat-strip-name {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.day-cat-strip .cat-strip-val {
font-size: 13px;
flex-shrink: 0;
}
.day-cat-strip .cat-strip-dots { display: none; }
.day-cat-strip .cat-strip-sep { display: none; }
}
/* === Pills uniformes estilo mini-card (TIPO / CATEGORIA / METODO / FOTO) === */
.tx-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
/* TIPO (Albarán/Factura/etc): subtítulo neutro */
.tx-pill-tipo { color: var(--text-muted); }
/* CATEGORIA: matiz por tipo de categoría */
.tx-pill-cat { color: var(--text-muted); }
.tx-pill-cat-comida { color: #d8956a; border-color: rgba(216,149,106,0.30); }
.tx-pill-cat-bebida { color: #76b39d; border-color: rgba(118,179,157,0.30); }
.tx-pill-cat-musica { color: #b89cd8; border-color: rgba(184,156,216,0.30); }
.tx-pill-cat-otros { color: var(--text-muted); }
/* MÉTODO de pago */
.tx-pill-cash { color: var(--accent); border-color: rgba(212,175,55,0.30); }
.tx-pill-credito { color: var(--success); border-color: rgba(118,179,157,0.30); }
/* FOTO — solo indicador visual (mismo tamaño que los demás pills).
Para ver las fotos: ⋮ > Ver detalles. */
.tx-pill-foto {
color: var(--success);
border-color: rgba(118,179,157,0.30);
cursor: help;
}
@media (max-width: 540px) {
.tx-pill {
font-size: 9px;
padding: 3px 7px;
letter-spacing: 0.4px;
}
}
/* Total destacado en el day-summary (el card de la derecha) */
#day-summary .day-summary-item:last-child {
background: rgba(212, 175, 55, 0.10);
border-color: rgba(212, 175, 55, 0.30);
}
@media (max-width: 540px) {
.day-summary {
padding: 6px;
gap: 5px;
}
.day-summary-item {
padding: 8px 6px;
}
.day-summary-label { font-size: 9px; letter-spacing: 1px; }
.day-summary-value { font-size: 13.5px; }
}
/* === Panel de transacciones: header centrado, colapsable, STICKY ===
Sticky al hacer scroll: la suma del día queda siempre visible arriba. */
/* Header sticky del panel de transacciones — fondo SÓLIDO de borde a
borde del panel (sin degradado transparente: se veían los bordes del
contenido pasando por detrás). */
.tx-panel-header {
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
transition: background 0.12s;
position: sticky;
top: 0;
z-index: 8;
background: var(--bg-card);
margin: 0 -24px 12px;
padding: 12px 24px;
border-radius: 0;
box-shadow: 0 10px 16px -10px rgba(0, 0, 0, 0.5);
}
.tx-panel-header:hover {
background: var(--bg-panel-head);
}
@media (max-width: 540px) {
.tx-panel-header { margin: 0 -10px 10px; padding: 10px; }
}
@media (max-width: 380px) {
.tx-panel-header { margin: 0 -8px 10px; padding: 10px 8px; }
}
.tx-panel-title {
text-align: center;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
margin: 0;
}
.collapse-chevron {
font-size: 14px;
color: var(--text-subtle);
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
display: inline-block;
}
.tx-panel-header.collapsed .collapse-chevron {
transform: rotate(-90deg);
}
/* Wrapper colapsable con animación suave */
.tx-summary-wrap {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, margin-bottom 0.25s;
max-height: 800px;
opacity: 1;
margin-bottom: 16px;
}
.tx-summary-wrap.collapsed {
max-height: 0;
opacity: 0;
margin-bottom: 0;
}
/* === Más aire entre meta y pills en móvil === */
@media (max-width: 540px) {
.tx-meta {
gap: 8px;
}
.tx-bottom-row {
margin-top: 4px;
}
}
/* === Indicador discreto de foto junto al nombre (no clickable) === */
.tx-foto-indicator {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 6px;
font-size: 11px;
vertical-align: middle;
opacity: 0.85;
text-transform: none;
letter-spacing: 0;
}
.tx-foto-indicator-count {
font-size: 9px;
font-weight: 700;
color: var(--success);
background: rgba(118,179,157,0.18);
border-radius: 3px;
padding: 1px 4px;
font-variant-numeric: tabular-nums;
}
/* ===================================================================
POLISH PROFESIONAL — pase global de refinamientos visuales
Sin tocar estructura, solo refina: shadows, radii, hover, contrast
=================================================================== */
/* Panels: sombra muy sutil + border-radius unificado 12px */
.panel {
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
/* Transacciones: hover más refinado, sombra ligera al hover */
.tx-item {
transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.tx-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
/* Mini-cards: borde más sutil y hover suave */
.day-summary-item,
.day-cat-strip .cat-strip-item,
.tx-details-cell,
.caja-meta-cell {
transition: background 0.15s, border-color 0.15s;
}
/* Botones de acción: micro-refinamiento del border */
.action-buttons .btn { border-width: 1px; }
/* Pills: mejor legibilidad */
.tx-pill { line-height: 1.2; }
/* Modales: sombra más profesional (depth real) */
.modal {
box-shadow:
0 24px 48px rgba(0,0,0,0.45),
0 8px 16px rgba(0,0,0,0.25),
0 0 0 1px rgba(255,255,255,0.03) inset;
}
/* Sin radial gradient inferior (causa "void feeling" en scroll iOS) */
/* El body bg ya está actualizado arriba */
/* Mejorar focus visible (accesibilidad + look profesional) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid rgba(212, 175, 55, 0.55);
outline-offset: 2px;
}
/* ===================================================================
CROSS-DEVICE POLISH — iPhone + Samsung + Web optimizations
=================================================================== */
/* Quita el flash azul/gris de tap en Android y iOS al tocar elementos */
* { -webkit-tap-highlight-color: transparent; }
/* Botones: evita el menú "Copiar/Guardar" al mantener pulsado en móvil */
button, .btn, [role="button"], .tx-pill, .tx-menu-btn, .fab-scan {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Touch target mínimo 44x44 (Apple HIG) para iconos pequeños */
.icon-btn,
.tx-menu-btn,
.modal-close {
min-width: 44px;
min-height: 44px;
}
/* Pero permitimos que visualmente sean más pequeños — el target invisible se extiende */
.tx-menu-btn {
width: auto;
padding: 8px 10px;
}
/* Mejor renderizado de fuentes cross-browser */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Sin línea dashed en el header del modal (look más limpio) */
.tx-details-summary-top {
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* iOS safe-area: insets para notch / home indicator en modales y FAB */
.modal-overlay {
padding-top: max(16px, env(safe-area-inset-top));
padding-bottom: max(16px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
/* ===================================================================
SVG ICONS — tamaños por contexto (chrome UI unificado cross-system)
=================================================================== */
/* Base: icono SVG inline en cualquier contenedor */
svg.ico {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
flex-shrink: 0;
}
/* Tx-icon (icono grande izquierda de cada transacción) */
.tx-icon svg.ico {
width: 22px; height: 22px;
color: var(--accent);
vertical-align: middle;
}
@media (max-width: 540px) {
.tx-icon svg.ico { width: 20px; height: 20px; }
}
/* Pills (tipo, categoria, método, foto): icono más pequeño junto al texto */
.tx-pill svg.ico {
width: 12px; height: 12px;
margin-right: 4px;
vertical-align: -2px;
}
@media (max-width: 540px) {
.tx-pill svg.ico { width: 11px; height: 11px; }
}
/* Menu dropdown items (Ver detalles / Editar / Eliminar) */
.tx-menu-item-icon { display: inline-flex; align-items: center; }
.tx-menu-item-icon svg.ico {
width: 16px; height: 16px;
color: var(--text-muted);
}
.tx-menu-item-danger .tx-menu-item-icon svg.ico { color: #f87171; }
/* FAB: icono grande dentro del botón flotante */
.fab-scan svg.ico,
.fab-scan-icon svg {
width: 26px; height: 26px;
stroke-width: 1.6;
}
@media (max-width: 540px) {
.fab-scan svg.ico,
.fab-scan-icon svg { width: 24px; height: 24px; }
}
/* FAB en loading: cambia el spin del icono por spinner ring */
.fab-scan.loading .fab-scan-icon { animation: fabSpin 0.9s linear infinite; opacity: 0.7; }
@keyframes fabSpin { to { transform: rotate(360deg); } }
/* Botón "Escanear con IA" dentro del form */
.btn-scan-ai-icon svg.ico { width: 18px; height: 18px; }
/* SVG dentro del modal "Ver detalles" — icono grande dorado del header */
.tx-details-icon svg.ico {
width: 28px; height: 28px;
color: var(--accent);
}
@media (max-width: 540px) {
.tx-details-icon svg.ico { width: 24px; height: 24px; }
}
/* SVG dentro de las celdas del modal (categoria value, etc.) */
.tx-details-cell-value svg.ico {
width: 14px; height: 14px;
margin-right: 4px;
vertical-align: -2px;
color: var(--text-muted);
}
/* SVG dentro del day-cat-strip (categorías arriba) */
.day-cat-strip .cat-strip-ico svg.ico {
width: 14px; height: 14px;
color: var(--accent);
}
/* Color matiz por categoría (igual que pills) */
.day-cat-strip .cat-strip-item:nth-of-type(n) .cat-strip-ico svg.ico { color: var(--text-muted); }
/* SVG dentro de method-option buttons (Cash/Crédito en form) */
.method-option svg.ico {
width: 16px; height: 16px;
margin-right: 6px;
vertical-align: -3px;
}
/* SVG en form label de fotos */
.form-label svg.ico {
width: 13px; height: 13px;
vertical-align: -2px;
margin-right: 4px;
}
/* SVG en botón "Adjuntar" foto */
.tx-foto-add-icon svg.ico {
width: 22px; height: 22px;
}
/* SVG en section header del modal (clipboard/note/camera/pencil) */
.tx-details-header-ico svg.ico {
width: 14px; height: 14px;
vertical-align: -2px;
}
/* === Card de transacción REFACTOR LIMPIO (estilo bancario) ===========
- Sin pills coloridos
- Top: icono + título + importe + ⋮
- Meta línea: TIPO · hora · encargado (texto fino gris)
- Tap a la card → abre Ver detalles
==================================================================== */
/* Card tappable: pointer cursor. Sin :active background — molesta cuando
el usuario toca para scrollear y se ve un flash oscuro. iOS ya muestra
su propio tap-highlight (lo desactivamos a transparent globalmente). */
.tx-item[data-tx-open] {
cursor: pointer;
touch-action: manipulation;
}
/* Hover sutil SOLO en desktop (pointer fino). En táctil no se aplica. */
@media (hover: hover) and (pointer: fine) {
.tx-item[data-tx-open]:hover {
background: rgba(245,232,211,0.025);
}
}
/* LAYOUT extracto bancario una sola fila:
[HORA fija] [icono] [nombre flex] [late?] [importe] [⋮] */
.tx-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.tx-item .tx-time-leading {
flex-shrink: 0;
width: 38px;
font-size: 11px;
color: var(--text-subtle);
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
opacity: 0.75;
text-align: left;
}
.tx-item .tx-icon { flex-shrink: 0; }
.tx-item .tx-title-wrap {
flex: 1;
min-width: 0;
}
.tx-item .tx-title {
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--text);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.tx-item .tx-late-wrap {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
/* Indicador "tiene notas" — burbuja sutil al FINAL de la fila (antes del menú) */
.tx-notes-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
color: #8ebde8;
opacity: 0.7;
cursor: help;
line-height: 1;
flex-shrink: 0;
}
.tx-notes-ico:hover { opacity: 1; }
.tx-notes-ico svg { display: block; }
.tx-item .tx-amount {
font-family: 'Manrope', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: 16px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
letter-spacing: -0.2px;
flex-shrink: 0;
}
@media (max-width: 540px) {
.tx-item { gap: 8px !important; padding: 10px 12px !important; }
.tx-item .tx-time-leading { width: 34px; font-size: 10.5px; }
.tx-item .tx-title { font-size: 13.5px; letter-spacing: 0.2px; }
.tx-item .tx-amount { font-size: 15px; }
}
/* Mini indicador de foto al lado del nombre */
.tx-foto-mini {
display: inline-flex;
align-items: center;
font-size: 11px;
color: var(--success);
opacity: 0.85;
letter-spacing: 0;
text-transform: none;
font-weight: 600;
}
/* En móvil aún más compacto */
@media (max-width: 540px) {
.tx-item .tx-title { font-size: 13.5px; }
.tx-item .tx-amount { font-size: 16px; }
.tx-meta-line { font-size: 11px; gap: 5px; }
}
/* ==================================================================
ADJUNTOS PDF — miniaturas y visor
================================================================== */
/* Miniatura PDF en el strip de adjuntos del form */
.tx-foto-thumb.tx-foto-thumb-pdf {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
background: rgba(248, 113, 113, 0.10);
border: 1px solid rgba(248, 113, 113, 0.35);
cursor: pointer;
}
.tx-foto-pdf-ico { font-size: 28px; line-height: 1; }
.tx-foto-pdf-label {
font-size: 9px; font-weight: 800;
color: #f87171;
letter-spacing: 1.5px;
}
/* Miniatura PDF en el modal "Ver detalles" */
.tx-details-pdf-tile {
width: 130px; height: 130px;
border-radius: 8px;
border: 1px solid rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.08);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(0,0,0,0.30);
padding: 10px;
}
.tx-details-pdf-tile:hover {
transform: translateY(-2px) scale(1.03);
border-color: #f87171;
box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
.tx-details-pdf-ico { font-size: 38px; line-height: 1; }
.tx-details-pdf-name {
font-size: 11px;
color: var(--text-muted);
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tx-details-pdf-tag {
font-size: 9px;
font-weight: 800;
color: #f87171;
letter-spacing: 1.5px;
background: rgba(248,113,113,0.15);
padding: 1px 6px;
border-radius: 3px;
}
@media (max-width: 540px) {
.tx-details-pdf-tile { width: 110px; height: 110px; }
.tx-details-pdf-ico { font-size: 32px; }
}
/* Visor de PDF: contenedor scroll vertical. touch-action: pan-y obliga
a iOS Safari a hacer scroll vertical aunque el body tenga touch-action:none. */
.foto-viewer-pdf-wrap {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
background: #2a2a2a;
padding: 56px 8px max(20px, env(safe-area-inset-bottom));
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
text-align: center;
z-index: 1;
touch-action: pan-y;
}
/* Páginas del PDF: por defecto PREVIEW centrado tamaño folio (no ocupa
toda la pantalla en desktop). Click en la página → ancho completo.
El canvas se renderiza a resolución completa, así ampliado va nítido. */
.pdf-page {
display: block;
background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
margin: 0 auto 12px;
width: min(100%, 720px);
height: auto;
cursor: zoom-in;
}
.foto-viewer-pdf-wrap.pdf-expanded .pdf-page {
width: 100%;
cursor: zoom-out;
}
.pdf-loading, .pdf-error {
padding: 24px;
color: #ccc;
text-align: center;
font-size: 14px;
}
.pdf-error { color: #f87171; }
/* Botón descarga PDF en la toolbar (verde, solo aparece para PDF) */
.foto-viewer-tool-dl {
background: rgba(118,179,157,0.22) !important;
border-color: rgba(118,179,157,0.45) !important;
color: #76b39d !important;
}
.foto-viewer-tool-dl:hover {
background: rgba(118,179,157,0.32) !important;
}
/* IMAGEN: permitir pinch-zoom nativo */
.foto-viewer-stage img {
touch-action: pinch-zoom;
}
/* ===== MÓVIL: panel de la fecha en dos líneas (opción D elegida por Robert, 5-sep-2026) =====
Línea 1: fecha + etiqueta "Abierta" a la derecha. Línea 2: apertura y encargado.
Antes ocupaba 118 px con la etiqueta en su propia línea; ahora unos 70. Escritorio igual.
(selectores con .panel.panel-caja para ganar a la regla general de escritorio) */
@media (max-width: 600px) {
.panel.panel-caja { padding: 10px 12px; }
.panel.panel-caja .panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; margin: 0; }
.panel.panel-caja .panel-header .panel-title { font-size: 15.5px; margin: 0; grid-column: 1; grid-row: 1; min-width: 0; width: auto; flex: none; }
.panel.panel-caja .panel-header > .badge { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 9px; padding: 3px 8px; }
.panel.panel-caja .panel-header .caja-meta { grid-column: 1 / -1; grid-row: 2; font-size: 11.5px; margin: 0; width: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; align-items: center; }
.panel.panel-caja .panel-header .caja-meta-item { display: inline-flex; gap: 4px; }
}
/* ===== MÓVIL COMPACTO (Robert, 5-sep-2026: "todo más junto") — solo ≤600px ===== */
.tx-header-total { display: none; }
@media (max-width: 600px) {
/* menos aire entre bloques */
.app-header { padding: 8px 10px; margin-bottom: 8px; }
.panel { margin-bottom: 8px; }
.panel.panel-caja { margin-bottom: 8px; }
/* cabecera "Transacciones del día": título a la izquierda, total y flecha a la derecha */
.panel.panel-tx .tx-panel-header { justify-content: space-between; gap: 8px; margin: 0 -10px 8px; padding: 8px 10px; }
.panel.panel-tx .tx-panel-title { font-size: 15px; text-align: left; gap: 6px; }
.panel.panel-tx .tx-panel-title { margin-right: auto; }
.panel.panel-tx .collapse-chevron { order: 2; }
.tx-header-total { display: inline; order: 1; margin-left: auto; font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--accent); }
.tx-panel-header:not(.collapsed) .tx-header-total { display: none; }
.collapse-chevron { font-size: 12px; }
.tx-summary-wrap { margin-bottom: 10px; }
/* cifras y categorías más bajas */
.day-summary { gap: 5px; padding: 6px; margin-bottom: 8px; }
.day-summary-item { padding: 7px 6px; }
.day-summary-label { font-size: 9px; margin-bottom: 2px; }
.day-summary-value { font-size: 14px; }
#sum-total { font-size: 16px; }
.day-cat-strip { gap: 5px; padding: 6px; margin-bottom: 0; }
.day-cat-strip .cat-strip-item { padding: 6px 9px; }
.day-cat-strip .cat-strip-name { font-size: 11.5px; }
.day-cat-strip .cat-strip-val { font-size: 12.5px; }
/* grupos y filas un poco más finos */
.tx-group-header { padding: 7px 12px; }
.tx-item { padding: 9px 10px; }
.panel.panel-tx { padding-top: 10px; }
/* Informes: periodos en UNA fila deslizable */
/* Informes en móvil: selector de dos pasos (ver .rp-mobile más abajo);
los chips clásicos se esconden pero siguen recibiendo los clics. */
.report-period-picker { display: block; padding: 8px; }
.report-period-picker > .report-period-btn { display: none; }
}
/* ===== Botón de desplegar "Transacciones del día" bien visible (Robert, 5-sep-2026) =====
Antes era una flechita minúscula; ahora es un botón redondo con borde, flecha
hacia abajo cuando está cerrado (hay más que ver) y hacia arriba cuando está abierto. */
.collapse-chevron {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid rgba(212,175,55,0.45); background: rgba(212,175,55,0.10);
color: var(--accent); font-size: 13px; line-height: 1; flex: 0 0 auto;
transform: rotate(180deg);
}
.tx-panel-header.collapsed .collapse-chevron { transform: rotate(0deg); }
@media (hover: hover) { .tx-panel-header:hover .collapse-chevron { background: rgba(212,175,55,0.22); } }
@media (max-width: 600px) {
.collapse-chevron { width: 30px; height: 30px; font-size: 14px; }
}
/* ===== Informes: selector de periodo de dos pasos (móvil) y fechas con etiqueta ===== */
.rp-mobile { display: none; }
.rp-seg {
display: flex; gap: 3px; padding: 3px;
background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.05); border-radius: 11px;
}
.rp-seg + .rp-seg { margin-top: 6px; }
.rp-seg.hidden { display: none; }
.rp-seg button {
flex: 1 1 0; min-width: 0; padding: 11px 4px;
background: transparent; border: none; border-radius: 8px;
font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
color: var(--text-muted); cursor: pointer; white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.rp-seg.rp-unit button { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.8px; }
.rp-seg button.active {
background: var(--accent-soft); color: var(--accent);
box-shadow: 0 0 0 1px rgba(212,175,55,0.35) inset;
}
/* Fechas del personalizado: etiqueta + campo, en todos los tamaños */
.rp-date { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.rp-date-lbl { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-subtle); font-weight: 700; }
.rp-date .form-input, .rp-date .flatpickr-mobile, .rp-date input.flatpickr-input {
width: 100%; max-width: none; min-width: 0; box-sizing: border-box;
font-size: 16px; padding: 11px 12px;
background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px; color: var(--text);
}
.rp-date input::placeholder { color: var(--text-subtle); opacity: 1; }
.report-custom-range.active { display: flex; flex-wrap: nowrap; gap: 10px; }
@media (max-width: 600px) {
.rp-mobile { display: block; }
.report-custom-range.active { margin-top: 8px; }
}
/* Flecha del botón de desplegar dibujada con líneas (nítida en el iPhone), no un carácter */
.collapse-chevron { font-size: 0 !important; color: transparent; }
.collapse-chevron::before {
content: ""; display: block; width: 9px; height: 9px;
border-right: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent);
transform: translateY(-2px) rotate(45deg); border-radius: 1px;
}
/* ===== Cabecera de Administración en móvil (Robert, 5-sep-2026: "como cortada a los lados") =====
El modal de admin tiene padding lateral de 20px pero la cabecera fija se estiraba solo 14px:
la banda se quedaba 6px corta por cada lado. Ahora el modal y la cabecera van a 14px,
la banda llega a los bordes, con las esquinas redondeadas del modal y el mismo fondo que
Informes / Historial. */
@media (max-width: 600px) {
#modal-admin .modal { padding: 14px 14px 18px; }
#modal-admin .modal-header {
margin: -14px -14px 8px; padding: 10px 14px 8px; top: -14px; height: 50px;
background: var(--bg-card);
border-radius: 13px 13px 0 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 8px 14px -8px rgba(0,0,0,0.5);
}
#modal-admin .admin-tabs { top: 36px; }
#modal-admin-edit .modal-header { margin: -18px -14px 12px; padding: 12px 14px 8px; top: -18px; background: var(--bg-card); border-radius: 13px 13px 0 0; }
/* La ✕ de las cabeceras fijas, más ligera en el móvil */
#modal-admin .modal-header .modal-close, #modal-admin-edit .modal-header .modal-close,
#modal-reports .modal-header .modal-close, #modal-history .modal-header .modal-close,
#modal-tx-details .modal-header .modal-close {
width: 34px; height: 34px; font-size: 16px; border-radius: 9px; box-shadow: none;
}
}
/* ===== "Transacciones del día" en móvil: dentro del panel, no de borde a borde (Robert, 5-sep-2026) ===== */
@media (max-width: 600px) {
.panel.panel-tx .tx-panel-header {
margin: 0 0 8px !important; padding: 10px 12px !important;
border-radius: 10px; background: rgba(0,0,0,0.22);
border: 1px solid var(--border); box-shadow: none;
top: 6px; /* al pegarse arriba deja un poco de aire */
}
.panel.panel-tx .tx-panel-title { font-size: 17px; }
.panel.panel-tx .tx-count-badge { font-size: 15px; }
.tx-header-total { font-size: 16px; }
}
/* ===== ✕ de cerrar, igual en toda la app (Robert, 5-sep-2026): círculo rojo suave,
borde fino, sin sombra, aspa dibujada con líneas (nítida en el iPhone). Robert quiso
mantener el rojo; lo que "no pegaba" era el cuadrado con borde grueso y sombra. ===== */
.modal-close {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(224,106,80,0.10);
border: 1px solid rgba(224,106,80,0.32);
color: transparent; font-size: 0; box-shadow: none;
position: relative;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.modal-close::before, .modal-close::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 14px; height: 2px; border-radius: 2px;
background: #e58b76;
transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:active { transform: scale(0.94); }
@media (hover: hover) {
.modal-close:hover { background: rgba(224,106,80,0.22); border-color: rgba(224,106,80,0.6); color: transparent; }
.modal-close:hover::before, .modal-close:hover::after { background: #ff9a82; }
}
@media (max-width: 600px) {
#modal-admin .modal-header .modal-close, #modal-admin-edit .modal-header .modal-close,
#modal-reports .modal-header .modal-close, #modal-history .modal-header .modal-close,
#modal-tx-details .modal-header .modal-close { border-radius: 50%; }
}
/* ===== UNA sola cabecera de modal en móvil (Robert, 5-sep-2026: "que quede todo igual") =====
Historial, Informes, Administración, fichas, detalle de transacción y el resto: misma banda
fija arriba, mismas esquinas, misma altura y la ✕ en el mismo sitio. Todos los modales pasan
a padding 14px para que la banda llegue justo a los bordes. */
@media (max-width: 600px) {
.modal, #modal-admin .modal, #modal-history .modal, #modal-reports .modal { padding: 14px 14px 18px; }
.modal > .modal-header,
#modal-admin .modal-header, #modal-admin-edit .modal-header, #modal-admin-detail .modal-header,
#modal-history .modal-header, #modal-reports .modal-header, #modal-tx-details .modal-header {
position: sticky; top: -14px; z-index: 31;
margin: -14px -14px 10px; padding: 8px 14px 8px; min-height: 50px; height: auto; box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--bg-card);
border-radius: 13px 13px 0 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 8px 14px -8px rgba(0,0,0,0.5);
}
.modal-header .modal-title { margin: 0; font-size: 17px; line-height: 1.2; }
.modal-header .modal-close { position: static; }
#modal-admin .admin-tabs { top: 36px; }
}
/* ===== Arreglos v68 (5-sep-2026) =====
1) La ✕ dibujada se colocaba respecto a la cabecera (el botón quedaba "static" por reglas
antiguas de cada modal) y salía en el centro: el botón siempre posicionado.
2) Campos de fecha de "Fechas" en iPhone: el input nativo de flatpickr colapsaba de alto y el
texto se recortaba; altura fija y valor centrado. */
.modal-close, .modal-header .modal-close, .report-period-picker .modal-close { position: relative !important; }
.modal-close { font-size: 0 !important; color: transparent !important; line-height: 0; }
.rp-date .form-input, .rp-date .flatpickr-mobile, .rp-date input.flatpickr-input, .rp-date input[type="date"] {
height: 46px; min-height: 46px; line-height: 24px; padding: 0 12px;
display: flex; align-items: center;
-webkit-appearance: none; appearance: none; overflow: visible;
}
.rp-date input[type="date"]::-webkit-date-and-time-value { min-height: 24px; line-height: 24px; text-align: left; }
.rp-date input[type="date"]::-webkit-datetime-edit { padding: 0; }
.report-period-picker, .report-custom-range, .rp-date { overflow: visible; }
/* ===== Campos de fecha de Informes, profesionales (v69): altos, con icono de calendario
dorado y el calendario de la app también en el iPhone (disableMobile). ===== */
.rp-date .form-input, .rp-date input.flatpickr-input {
height: 48px; min-height: 48px; line-height: 24px; padding: 0 42px 0 14px;
font-size: 16px; font-weight: 600; color: var(--text);
background-color: rgba(0,0,0,0.30);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
border: 1px solid rgba(212,175,55,0.28); border-radius: 10px;
cursor: pointer;
}
.rp-date .form-input:focus, .rp-date input.flatpickr-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-date input::placeholder { color: var(--text-muted); font-weight: 500; }
.rp-date-lbl { font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-muted); }
@media (max-width: 600px) { .report-custom-range.active { gap: 10px; margin-top: 10px; } }
/* ===== v70 (5-sep-2026) ===== */
/* Categorías del día sin emojis: un punto de color por categoría (Robert: "no queda profesional") */
.day-cat-strip .cat-strip-ico { display: none !important; }
.day-cat-strip .cat-strip-left::before {
content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #8a8a8a; flex: 0 0 auto; margin-right: 2px;
}
.day-cat-strip .cat-strip-item[data-cat="comida"] .cat-strip-left::before { background: #d4af37; }
.day-cat-strip .cat-strip-item[data-cat="bebida"] .cat-strip-left::before { background: #6d8fc7; }
.day-cat-strip .cat-strip-item[data-cat="musica"] .cat-strip-left::before { background: #b388e0; }
.day-cat-strip .cat-strip-item[data-cat="otros"] .cat-strip-left::before { background: #8a8a8a; }
/* Cabecera de los modales más baja en móvil (Robert: "que no quede tan grande") */
@media (max-width: 600px) {
.modal > .modal-header,
#modal-admin .modal-header, #modal-admin-edit .modal-header, #modal-admin-detail .modal-header,
#modal-history .modal-header, #modal-reports .modal-header, #modal-tx-details .modal-header {
min-height: 42px; padding: 4px 14px;
}
.modal-header .modal-title { font-size: 16px; }
.modal-header .modal-close { width: 30px; height: 30px; }
.modal-header .modal-close::before, .modal-header .modal-close::after { width: 12px; }
#modal-admin .admin-tabs { top: 28px; }
}
/* v72 (5-sep-2026): Robert aclaró que el "texto más grande" era el TÍTULO de la cabecera del
modal, no las cifras (lo de v71 se retiró). Cabecera baja, título grande, poco hueco. */
@media (max-width: 600px) {
.modal > .modal-header,
#modal-admin .modal-header, #modal-admin-edit .modal-header, #modal-admin-detail .modal-header,
#modal-history .modal-header, #modal-reports .modal-header, #modal-tx-details .modal-header {
min-height: 44px; padding: 5px 14px;
}
.modal-header .modal-title { font-size: 19px; }
}
/* v73: las cifras/categorías grandes de v71 SE QUEDAN (Robert: "no vuelve como estaba");
cabecera de modal compacta con título grande. */
@media (max-width: 600px) {
.day-summary { gap: 6px; padding: 6px; }
.day-summary-item { padding: 8px 4px; }
.day-summary-label { font-size: 10px; letter-spacing: 1px; margin-bottom: 3px; }
.day-summary-value { font-size: 16px; }
#sum-total { font-size: 18px; }
.day-cat-strip { gap: 6px; padding: 6px; }
.day-cat-strip .cat-strip-item { padding: 8px 10px; }
.day-cat-strip .cat-strip-name { font-size: 13px; }
.day-cat-strip .cat-strip-val { font-size: 14px; }
.modal > .modal-header,
#modal-admin .modal-header, #modal-admin-edit .modal-header, #modal-admin-detail .modal-header,
#modal-history .modal-header, #modal-reports .modal-header, #modal-tx-details .modal-header {
min-height: 46px; padding: 5px 14px;
}
.modal-header .modal-title { font-size: 20px; letter-spacing: 0.2px; }
}
/* v74 (5-sep-2026): menos hueco entre el importe y los tres puntos en las filas (Robert).
El botón ⋮ tenía 44px de ancho mínimo + padding; se deja un target táctil alto pero estrecho
y pegado al borde, y el importe se alinea al final. */
@media (max-width: 600px) {
.tx-item { padding-right: 6px !important; }
.tx-item .tx-title-wrap { flex: 1 1 auto; min-width: 0; }
.tx-item .tx-amount { margin-left: auto; }
.tx-item .tx-menu-wrap { margin-left: -2px; }
.tx-item .tx-menu-btn { min-width: 30px; width: 30px; min-height: 40px; height: 40px; padding: 0; font-size: 19px; }
}
/* v75: la cabecera "Transacciones del día" no debe partirse en dos líneas en el móvil */
@media (max-width: 600px) {
.panel.panel-tx .tx-panel-header { flex-wrap: nowrap; gap: 6px; }
.panel.panel-tx .tx-panel-title { font-size: 16px; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; }
.panel.panel-tx .tx-count-badge { font-size: 14px; }
.tx-header-total { font-size: 15px; flex: 0 0 auto; }
.panel.panel-tx .collapse-chevron { width: 28px; height: 28px; }
}
/* v76: título de TODAS las cabeceras igual (Administración tenía una regla propia a 15px) */
@media (max-width: 600px) {
.modal-header .modal-title,
#modal-admin .modal-title, #modal-reports .modal-title, #modal-history .modal-title,
#modal-admin-edit .modal-title, #modal-admin-detail .modal-title, #modal-tx-details .modal-title {
font-size: 20px !important; letter-spacing: 0.2px !important; opacity: 1 !important; line-height: 1.2;
}
}
/* v77: adjuntos en "Ver detalles" más grandes y centrados; el PDF enseña su primera página */
#modal-tx-details .tx-d-attach-grid { grid-template-columns: repeat(auto-fill, 124px); gap: 10px; justify-content: center !important; }
#modal-tx-details .tx-d-attach-grid.is-1 { grid-template-columns: 168px; }
#modal-tx-details .tx-d-attach-tile.is-pdf { aspect-ratio: 3 / 4; }
.tx-d-attach-tile.is-pdf.has-thumb { padding: 0; background: #f4f1ea; border-color: rgba(245,232,211,0.18); }
.tx-d-attach-pdf-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tx-d-attach-tile.has-thumb .tx-d-attach-pdf-ico { position: absolute; left: 6px; bottom: 6px; margin: 0; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.tx-d-attach-tile.has-thumb .tx-d-attach-tile-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 8px 6px; margin: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); color: #fff; text-align: right; -webkit-line-clamp: 1; }
/* ===== v78 (5-sep-2026) — opción A de Robert: lápiz en la fila, borrar solo en Detalles ===== */
.tx-item .tx-edit-btn { color: var(--accent); opacity: 0.85; }
.tx-item .tx-edit-btn svg { display: block; }
@media (hover: hover) { .tx-item .tx-edit-btn:hover { opacity: 1; background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.35); } }
.tx-list.locked .tx-menu-wrap { display: none; }
/* Cabecera de Detalles: lápiz, papelera y ✕, mismos círculos que la ✕ */
.modal-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hdr-act {
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.35); color: var(--accent);
cursor: pointer; padding: 0; transition: background 0.15s, transform 0.1s;
}
.hdr-act svg { display: block; width: 17px; height: 17px; }
.hdr-act.is-danger { background: rgba(224,106,80,0.10); border-color: rgba(224,106,80,0.32); color: #e58b76; }
.hdr-act:active { transform: scale(0.94); }
@media (hover: hover) {
.hdr-act:hover { background: rgba(212,175,55,0.22); }
.hdr-act.is-danger:hover { background: rgba(224,106,80,0.22); }
}
@media (max-width: 600px) {
.hdr-act { width: 30px; height: 30px; }
.hdr-act svg { width: 15px; height: 15px; }
.modal-header-actions { gap: 6px; }
}
/* ===== v79 (5-sep-2026): lápiz discreto en la fila; acciones de Detalles abajo con nombre ===== */
.tx-item .tx-edit-btn { color: var(--text-subtle); opacity: 0.6; }
.tx-item .tx-edit-btn svg { width: 15px; height: 15px; }
@media (hover: hover) { .tx-item .tx-edit-btn:hover { opacity: 1; color: var(--text); background: rgba(255,255,255,0.06); border-color: transparent; } }
.tx-d-footer {
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--border);
}
.btn-outline-gold {
padding: 11px 26px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
background: rgba(212,175,55,0.10); color: var(--accent); border: 1px solid rgba(212,175,55,0.45);
transition: background 0.15s;
}
.btn-text-danger {
padding: 11px 6px; background: transparent; border: none; font-family: inherit; font-size: 13px; font-weight: 600;
letter-spacing: 0.6px; color: #e58b76; opacity: 0.8; cursor: pointer;
}
@media (hover: hover) {
.btn-outline-gold:hover { background: rgba(212,175,55,0.2); }
.btn-text-danger:hover { opacity: 1; text-decoration: underline; }
}
@media (max-width: 600px) {
.tx-d-footer { margin-top: 10px; padding-top: 10px; }
.btn-outline-gold { padding: 12px 28px; }
}
/* ===== v80 (5-sep-2026): Informes con altura fija y selector de periodo fijo arriba (Robert) ===== */
@media (max-width: 600px) {
#modal-reports .modal { height: 88dvh; max-height: 88dvh; }
#modal-reports .report-period-picker {
position: sticky; top: 32px; /* justo bajo la cabecera (46px - 14px de padding) */
z-index: 30; background: var(--bg-pub);
/* la sombra sólida hacia arriba tapa el hueco entre cabecera y selector */
box-shadow: 0 -12px 0 0 var(--bg-pub), 0 8px 14px -8px rgba(0,0,0,0.5);
margin-bottom: 12px;
}
}
/* ===== v81 (5-sep-2026): sin saltos de tamaño en "Detalles" (Robert) =====
El modal tiene altura fija en móvil (como Informes) y las miniaturas reservan su sitio
desde el principio, con un brillo suave mientras cargan. */
@media (max-width: 600px) {
#modal-tx-details .modal { height: 88dvh; max-height: 88dvh; }
}
#modal-tx-details .tx-d-attach-tile { min-height: 124px; }
#modal-tx-details .tx-d-attach-grid.is-1 .tx-d-attach-tile { min-height: 168px; }
#modal-tx-details .tx-d-attach-tile.is-pdf:not(.has-thumb) {
background: linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 70%);
background-size: 200% 100%;
animation: thumbShimmer 1.4s linear infinite;
border-color: rgba(245,232,211,0.10);
}
@keyframes thumbShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #modal-tx-details .tx-d-attach-tile.is-pdf:not(.has-thumb) { animation: none; } }
#modal-tx-details .tx-d-attach-tile.is-img { background: rgba(255,255,255,0.04); }
/* ===== v82 (5-sep-2026): selector de periodo plegable al hacer scroll en Informes (móvil) ===== */
.rp-compact { display: none; }
@media (max-width: 600px) {
.report-period-picker.is-compact .rp-mobile,
.report-period-picker.is-compact .report-custom-range { display: none !important; }
.report-period-picker.is-compact { padding: 4px 6px 4px 14px; }
.report-period-picker.is-compact .rp-compact { display: flex; }
.rp-compact {
width: 100%; align-items: center; justify-content: space-between; gap: 10px;
background: transparent; border: none; padding: 5px 0; margin: 0;
font-family: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.rp-compact-lbl { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-compact-cta {
flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px;
}
}
/* ===== v83 (5-sep-2026): Informes, Historial y Detalles con la MISMA altura que Administración
(85vh; el 88dvh de antes era más bajo en el iPhone porque descuenta las barras de Safari). ===== */
@media (max-width: 600px) {
#modal-reports .modal, #modal-history .modal, #modal-tx-details .modal {
height: 85vh; max-height: 85vh;
}
}
/* ===== v84 (5-sep-2026) — BOTONES: un solo lenguaje en toda la app (Robert: "más profesionales") =====
Misma altura, mismo radio (10px), tracking suave en vez de 2px, sin sombras al pasar el ratón,
y solo tres papeles: primario (dorado lleno), secundario (contorno claro) y peligro (contorno rojo).
No se tocan anchos ni disposición: solo el aspecto. */
.btn, .btn-mini, .btn-outline-gold, .btn-text-danger, .btn-outline-danger, .btn-sm {
font-family: inherit; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
border-radius: 10px; box-shadow: none; transition: background 0.15s, border-color 0.15s, transform 0.08s, opacity 0.15s;
}
.btn { padding: 13px 18px; font-size: 13.5px; line-height: 1.2; }
.btn:hover:not(:disabled) { transform: none; box-shadow: none; background: #d6b84f; }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn-large { padding: 17px 22px; font-size: 14px; }
.btn-secondary { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid rgba(255,255,255,0.14); }
.btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); color: var(--text); }
.btn-danger { background: transparent; color: #e58b76; border: 1px solid rgba(224,106,80,0.45); }
.btn-danger:hover:not(:disabled) { background: rgba(224,106,80,0.14); box-shadow: none; }
.btn-mini, .btn-sm { padding: 9px 14px; font-size: 11.5px; letter-spacing: 0.6px; }
/* Pie de "Detalles": los dos botones con el mismo cuerpo; Eliminar en rojo suave */
.btn-outline-gold, .btn-outline-danger, .btn-text-danger {
padding: 11px 22px; font-size: 12.5px; letter-spacing: 0.8px;
background: rgba(255,255,255,0.03); border: 1px solid;
}
.btn-outline-gold { color: var(--accent); border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.10); }
.btn-text-danger, .btn-outline-danger { color: #e58b76; border-color: rgba(224,106,80,0.4); opacity: 1; text-decoration: none; }
@media (hover: hover) {
.btn-text-danger:hover, .btn-outline-danger:hover { background: rgba(224,106,80,0.14); text-decoration: none; opacity: 1; }
}
.btn-outline-gold:active, .btn-text-danger:active { transform: scale(0.985); }
/* ===== v85 (5-sep-2026) — "Detalles" como lista limpia (Robert: "que vaya con la app moderna") =====
Etiqueta a la izquierda, dato a la derecha, líneas finas; el tipo como etiqueta pequeña. */
#modal-tx-details .tx-d-chips {
display: flex; flex-direction: column; gap: 0;
background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
padding: 0 14px; margin-bottom: 12px;
}
#modal-tx-details .tx-d-chip {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 0; margin: 0; background: transparent; border: none; border-radius: 0;
border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: none;
}
#modal-tx-details .tx-d-chip:last-child { border-bottom: none; }
#modal-tx-details .tx-d-chip-k { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 0; flex: 0 0 auto; }
#modal-tx-details .tx-d-chip-v { font-size: 14px; font-weight: 600; color: var(--text); text-align: right; letter-spacing: 0; text-transform: none; margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Tipo: etiqueta pequeña a la derecha, no una banda */
#modal-tx-details .tx-d-chip.is-tipo { justify-content: space-between; padding: 10px 0; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
#modal-tx-details .tx-d-chip.is-tipo .tx-d-chip-k { display: inline; }
#modal-tx-details .tx-d-chip.is-tipo .tx-d-chip-v {
display: inline-block; padding: 4px 11px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(212,175,55,0.35);
}
/* Aviso "Añadida tarde" más ligero */
#modal-tx-details .tx-d-late { background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.22); border-radius: 10px; font-size: 12.5px; }
/* Cabecera nombre + importe con más aire abajo */
#modal-tx-details .tx-d-head { padding-bottom: 12px; margin-bottom: 12px; }
/* ===== v86 (5-sep-2026): altura completa SOLO en Informes, Administración e Historial.
"Detalles" (y el resto) vuelven a ajustarse al contenido (Robert: "lo demás modulado"). ===== */
@media (max-width: 600px) {
#modal-tx-details .modal { height: auto; max-height: 88dvh; }
}
/* v87: la lista de Detalles de verdad en fila (la regla vieja apilaba en columna y centraba) */
#modal-tx-details .tx-d-chip, #modal-tx-details .tx-d-chip.is-tipo {
flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
text-align: left !important; padding: 10px 0 !important; gap: 14px !important; min-height: 0;
}
#modal-tx-details .tx-d-chip-k { text-align: left !important; margin: 0 !important; }
#modal-tx-details .tx-d-chip-v { text-align: right !important; margin: 0 !important; font-size: 14px !important; }
#modal-tx-details .tx-d-chip.is-tipo .tx-d-chip-v { font-size: 11px !important; }
/* v88: al bajar por el informe se queda FIJA la fila Semana/Mes/Año/Fechas; solo se esconde la
segunda fila. Fuera la línea "Semana pasada · Cambiar" (Robert, 5-sep-2026). */
@media (max-width: 600px) {
.report-period-picker.is-compact .rp-mobile { display: block !important; }
.report-period-picker.is-compact .rp-when { display: none !important; }
.report-period-picker.is-compact .rp-compact { display: none !important; }
.report-period-picker.is-compact { padding: 6px; }
}
/* ===== v89 (5-sep-2026): "Detalles" cabe entero en el móvil sin scroll (Robert) ===== */
@media (max-width: 600px) {
#modal-tx-details .modal { max-height: 92dvh; padding-bottom: 12px; }
#modal-tx-details .modal-header { margin-bottom: 6px !important; }
#modal-tx-details .tx-d-head { padding: 4px 0 8px !important; margin-bottom: 8px !important; }
#modal-tx-details .tx-d-title { font-size: 17px !important; }
#modal-tx-details .tx-d-amount { font-size: 22px !important; }
#modal-tx-details .tx-d-chips { padding: 0 12px; margin-bottom: 8px; }
#modal-tx-details .tx-d-chip, #modal-tx-details .tx-d-chip.is-tipo { padding: 7px 0 !important; }
#modal-tx-details .tx-d-chip-k { font-size: 10.5px; }
#modal-tx-details .tx-d-chip-v { font-size: 13.5px !important; }
#modal-tx-details .tx-d-chip.is-tipo .tx-d-chip-v { padding: 3px 9px; font-size: 10.5px !important; }
#modal-tx-details .tx-d-late { padding: 7px 10px; font-size: 12px; margin-bottom: 8px; }
#modal-tx-details .tx-d-attach-head { margin: 4px 0 6px; }
#modal-tx-details .tx-d-attach-grid { gap: 8px; grid-template-columns: repeat(auto-fill, 96px); }
#modal-tx-details .tx-d-attach-grid.is-1 { grid-template-columns: 112px; }
#modal-tx-details .tx-d-attach-tile { min-height: 96px; }
#modal-tx-details .tx-d-attach-grid.is-1 .tx-d-attach-tile { min-height: 112px; }
#modal-tx-details .tx-d-attach-tile.is-pdf { aspect-ratio: 3 / 4; }
#modal-tx-details .tx-d-footer { margin-top: 8px; padding-top: 8px; }
#modal-tx-details .btn-outline-gold, #modal-tx-details .btn-text-danger { padding: 9px 18px; font-size: 12px; }
}
/* v90: "Transacciones del día" ya no se queda pegada arriba al hacer scroll en móvil (Robert) */
@media (max-width: 600px) {
.panel.panel-tx .tx-panel-header { position: static; top: auto; }
}
/* v91: más aire entre cabecera, nombre/importe y la lista en Detalles (Robert: "muy metido, pegado") */
@media (max-width: 600px) {
#modal-tx-details .modal-header { margin-bottom: 12px !important; }
#modal-tx-details .tx-d-head { padding: 6px 2px 14px !important; margin-bottom: 14px !important; }
#modal-tx-details .tx-d-chips { margin-bottom: 12px; }
#modal-tx-details .tx-d-late { margin-bottom: 12px; }
}
/* ===== v92 (5-sep-2026) — MÓVIL: botón + dorado y hoja "Nueva transacción" (opción A mejorada) ===== */
.fab-plus, .sheet-nueva { display: none; }
@media (max-width: 600px) {
/* fuera el botón morado y el botón grande "Nueva transacción"; queda Cerrar caja discreto */
.fab-scan { display: none !important; }
.action-buttons #btn-nueva-transaccion { display: none !important; }
.action-buttons { margin-top: 14px; padding-bottom: 84px; }
.action-buttons #btn-cerrar-caja {
width: auto; min-width: 0; padding: 11px 26px; font-size: 12.5px; letter-spacing: 0.8px;
background: transparent; color: #e58b76; border: 1px solid rgba(224,106,80,0.45);
}
.action-buttons #btn-cerrar-caja .btn-text-icon { display: none; }
/* el + */
.fab-plus {
display: flex; align-items: center; justify-content: center;
position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
width: 58px; height: 58px; border-radius: 50%; border: none; padding: 0;
background: #c9aa41; color: var(--bg-deep); cursor: pointer; z-index: 1210;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), opacity 0.15s, background 0.15s;
}
.fab-plus:active { transform: scale(0.94); }
.fab-plus-ico { position: relative; width: 22px; height: 22px; display: block; transition: transform 0.22s cubic-bezier(0.2,0.8,0.2,1); }
.fab-plus-ico::before, .fab-plus-ico::after {
content: ""; position: absolute; left: 50%; top: 50%; background: var(--bg-deep); border-radius: 2px;
transform: translate(-50%, -50%);
}
.fab-plus-ico::before { width: 22px; height: 2.6px; }
.fab-plus-ico::after { width: 2.6px; height: 22px; }
.fab-plus.is-open .fab-plus-ico { transform: rotate(45deg); }
.fab-plus.is-busy { background: #a88b30; pointer-events: none; }
.fab-plus.is-busy .fab-plus-ico { animation: fabSpin 1s linear infinite; }
@keyframes fabSpin { to { transform: rotate(360deg); } }
body.modal-open .fab-plus, body:not(.app-ready) .fab-plus, body.caja-cerrada .fab-plus, body.viendo-otra .fab-plus { opacity: 0; pointer-events: none; }
/* la hoja */
.sheet-nueva { display: block; position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.sheet-nueva-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.2s; }
.sheet-nueva-panel {
position: absolute; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%);
border: 1px solid var(--border-strong); border-bottom: none; border-radius: 20px 20px 0 0;
padding: 8px 14px calc(92px + env(safe-area-inset-bottom));
transform: translateY(105%); transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
}
.sheet-nueva.open { pointer-events: auto; }
.sheet-nueva.open .sheet-nueva-backdrop { opacity: 1; }
.sheet-nueva.open .sheet-nueva-panel { transform: translateY(0); }
.sheet-nueva-grip { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 4px auto 12px; }
.sheet-nueva-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--text); margin: 0 2px 10px; }
.sheet-nueva-item {
display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
padding: 13px 14px; margin-bottom: 8px; border-radius: 14px; cursor: pointer;
background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.07); color: var(--text); font-family: inherit;
transition: background 0.15s, border-color 0.15s;
}
.sheet-nueva-item:active { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.35); }
.sheet-nueva-ico {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35); color: var(--accent);
}
.sheet-nueva-ico svg { display: block; }
/* La IA se ve como IA: chispas sobre morado, como el botón ✨ de siempre */
#sheet-scan .sheet-nueva-ico { background: linear-gradient(135deg, #5a4080 0%, #7b5fac 55%, #5a4080 100%); border-color: rgba(167,139,250,0.55); color: #f5e8ff; box-shadow: 0 4px 14px rgba(123,95,172,0.35); }
#sheet-scan .sheet-nueva-txt b { color: #e6d9ff; }
.sheet-nueva-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-nueva-txt b { font-size: 15.5px; font-weight: 700; }
.sheet-nueva-txt small { font-size: 12px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .sheet-nueva-panel, .sheet-nueva-backdrop, .fab-plus-ico { transition: none; } }
}
/* v93: la hoja "Nueva transacción" sin hueco de sobra ni X gorda dentro (Robert) */
@media (max-width: 600px) {
.sheet-nueva-panel { padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
.sheet-nueva-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.sheet-nueva-title { margin: 0; font-size: 18px; }
.sheet-nueva-head .modal-close { width: 30px; height: 30px; }
.sheet-nueva-item:last-child { margin-bottom: 0; }
body.sheet-open .fab-plus { opacity: 0; pointer-events: none; transform: scale(0.8); }
}
/* v94 (5-sep-2026): sin zoom por doble toque en toda la app (Robert: "hay gente que lo hace
siempre"). `manipulation` deja el desplazamiento y el pellizco del visor; quita el doble tap. */
html, body, * { touch-action: manipulation; }
#modal-foto-viewer img, #modal-foto-viewer canvas { touch-action: none; } /* el visor tiene sus propios gestos (zoom/pan a dos dedos) */
/* ===== v96 (5-sep-2026) — elegir tipo de transacción: iconos de línea de la app en vez de
emojis, sin resalte pegado al tocar en móvil, y sin el botón morado (en móvil ya está en la hoja del +) ===== */
.tx-type-btn-icon {
width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.32); color: var(--accent);
font-size: 0;
}
.tx-type-btn-icon svg { display: block; }
.tx-type-btn { transition: background 0.15s, border-color 0.15s; }
.tx-type-btn:focus, .tx-type-btn:focus-visible { outline: none; background: rgba(0,0,0,0.25); border-color: var(--border); }
.tx-type-btn:active { background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.4); transform: none; }
@media (max-width: 600px) {
/* (v99) el botón de subir sí se ve en móvil */
.tx-type-btn { padding: 14px; }
}
/* ===== v97 (5-sep-2026) — el + no abre una ventana: se oscurece el fondo y saltan solo las dos
opciones encima del botón, alineadas a la derecha (Robert: "que salte solo las opciones") ===== */
@media (max-width: 600px) {
.sheet-nueva-backdrop { background: rgba(0,0,0,0.62); }
.sheet-nueva-panel {
left: auto; right: 18px; bottom: calc(18px + 58px + 14px + env(safe-area-inset-bottom));
width: auto; max-width: calc(100% - 36px);
background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0;
transform: none; transition: none;
display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sheet-nueva-head { display: none; }
.sheet-nueva-item {
width: auto; margin: 0; padding: 0; background: transparent; border: none;
display: flex; flex-direction: row-reverse; align-items: center; gap: 12px;
opacity: 0; transform: translateY(10px) scale(0.96);
transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
.sheet-nueva.open .sheet-nueva-item { opacity: 1; transform: none; }
.sheet-nueva.open #sheet-manual { transition-delay: 0.03s; }
.sheet-nueva.open #sheet-scan { transition-delay: 0.08s; }
.sheet-nueva-item:active { background: transparent; border: none; }
.sheet-nueva-item:active .sheet-nueva-ico { transform: scale(0.94); }
.sheet-nueva-ico {
width: 52px; height: 52px; margin-right: 3px;
background: var(--bg-card); border: 1px solid rgba(212,175,55,0.45); color: var(--accent);
box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.sheet-nueva-txt {
background: var(--bg-card); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
padding: 9px 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); gap: 1px;
}
.sheet-nueva-txt b { font-size: 15px; }
.sheet-nueva-txt small { font-size: 11.5px; }
/* el + se queda visible como X mientras están las opciones */
body.sheet-open .fab-plus { opacity: 1; pointer-events: auto; transform: none; }
}
/* ===== v98 (5-sep-2026) — LOTE de documentos escaneados ===== */
.lote-progress { margin: 4px 0 12px; }
.lote-progress-txt { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.lote-progress-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.3); overflow: hidden; }
.lote-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7b5fac, #d4af37); border-radius: 3px; transition: width 0.3s; }
.lote-list { display: flex; flex-direction: column; gap: 8px; }
.lote-row {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
}
.lote-row.is-done { opacity: 0.6; }
.lote-thumb { width: 44px; height: 56px; border-radius: 8px; object-fit: cover; object-position: top; flex: 0 0 auto; background: rgba(255,255,255,0.06); }
.lote-thumb.is-pdf { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; color: #fff; background: #d33; }
.lote-txt { flex: 1 1 auto; min-width: 0; }
.lote-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lote-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lote-estado { flex: 0 0 auto; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); }
.lote-estado.is-ok { color: var(--success); border-color: rgba(76,175,125,0.4); }
.lote-estado.is-bad { color: #e58b76; border-color: rgba(224,106,80,0.4); }
.lote-quitar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.lote-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }
#modal-lote .tx-d-footer { margin-top: 12px; }
#lote-start:disabled { opacity: 0.5; cursor: default; }
/* ===== v99 (5-sep-2026) — "Añadir": subir foto/PDF arriba, o a mano debajo ===== */
.picker-upload {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 13px 14px; margin-bottom: 10px; border-radius: 12px; cursor: pointer;
background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.4); color: var(--text); font-family: inherit;
transition: background 0.15s;
}
.picker-upload:active { background: rgba(212,175,55,0.18); }
.picker-upload-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #c9aa41; color: var(--bg-deep); }
.picker-upload-ico svg { display: block; }
.picker-upload-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker-upload-txt b { font-size: 15px; }
.picker-upload-txt small { font-size: 12px; color: var(--text-muted); }
.picker-o-manual { text-align: center; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-subtle); margin: 4px 0 10px; }
/* ===== v100 (5-sep-2026) — CÁMARA PROPIA a pantalla completa ===== */
.camara { position: fixed; inset: 0; z-index: 1300; background: #000; display: flex; flex-direction: column; }
.camara.hidden { display: none; }
.camara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.camara-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.camara-flash.on { opacity: 0.85; transition: none; }
.camara-top {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
.camara-title { font-family: 'Playfair Display', serif; font-size: 18px; color: #fff; font-weight: 700; }
.camara-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.35); color: #fff; font-size: 16px; cursor: pointer; }
.camara-count { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: #c9aa41; color: #0d2620; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; }
.camara-hint { position: relative; z-index: 2; text-align: center; color: rgba(255,255,255,0.85); font-size: 13px; padding: 4px 24px; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.camara-bottom {
position: relative; z-index: 2; margin-top: auto;
padding: 10px 0 calc(16px + env(safe-area-inset-bottom));
background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
}
.camara-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 10px; scrollbar-width: none; min-height: 12px; }
.camara-thumbs::-webkit-scrollbar { display: none; }
.camara-thumb { position: relative; flex: 0 0 auto; width: 52px; height: 68px; border-radius: 8px; overflow: hidden; border: 2px solid #c9aa41; background: #222; }
.camara-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camara-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; cursor: pointer; }
.camara-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px; }
.camara-cancel, .camara-done {
font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
.camara-cancel { justify-self: start; }
.camara-done { justify-self: end; background: #c9aa41; color: #0d2620; border-color: #c9aa41; }
.camara-done:disabled { opacity: 0.45; }
.camara-shutter {
width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.camara-shutter span { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: block; transition: transform 0.1s; }
.camara-shutter:active span { transform: scale(0.88); }
body.camara-open .fab-plus { opacity: 0; pointer-events: none; }
/* ===== v102 (5-sep-2026) — portada: Spoons · Lanzarote · Cajas · vNN (Robert) ===== */
.brand-city { font-size: 11px; color: var(--text-subtle); letter-spacing: 5px; text-transform: uppercase; margin-top: 8px; font-weight: 600; }
.brand-app { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text); font-weight: 700; margin-top: 18px; letter-spacing: 0.5px; }
.brand .app-version { margin-top: 4px; }
/* v103: el + desaparece con la caja cerrada (como el botón Nueva transacción) */
.fab-plus.hidden { display: none !important; }
/* ===== v109 (7-sep-2026) — Pendientes de confirmar (subidos por el personal) ===== */
.panel.panel-pend { border-color: rgba(212,175,55,0.35); padding: 12px 14px; }
.pend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pend-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; }
.pend-count { background: #c9aa41; color: var(--bg-deep); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.pend-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.pend-thumb { width: 42px; height: 54px; border-radius: 7px; object-fit: cover; object-position: top; flex: 0 0 auto; background: rgba(255,255,255,0.06); }
.pend-thumb.is-pdf { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; background: #d33; }
.pend-txt { flex: 1 1 0; min-width: 0; }
.pend-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-imp { font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.pend-imp.is-ef { color: var(--error); }
.pend-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-warn { font-size: 11px; color: #e5c76b; margin-top: 2px; white-space: normal; }
.pend-ok { flex: 0 0 auto; padding: 9px 12px; border-radius: 9px; background: #c9aa41; color: var(--bg-deep); border: none; font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; }
.pend-no { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(224,106,80,0.4); background: transparent; color: #e58b76; cursor: pointer; font-size: 13px; }
.pend-hint { font-size: 11.5px; color: var(--text-subtle); margin-top: 8px; }
@media (max-width: 600px) { .panel.panel-pend { padding: 10px 12px; margin-bottom: 8px; } .pend-title { font-size: 16px; } }
/* rechazar */
.rechazar-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.rechazar-motivos { display: flex; flex-direction: column; gap: 8px; }
.rechazar-motivo { text-align: left; padding: 13px 14px; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rechazar-motivo:active { background: rgba(224,106,80,0.12); border-color: rgba(224,106,80,0.4); }
.rechazar-hint { font-size: 12px; color: var(--text-subtle); margin-top: 12px; }
.link-btn { background: none; border: none; color: var(--accent); font-family: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.form-hint-inline { font-weight: 400; color: var(--text-subtle); text-transform: none; letter-spacing: 0; }
/* v114: fila de pendientes como las de la caja: hora · foto · nombre/detalle · importe · botones */
.pend-row { gap: 10px; padding: 11px 0; }
.pend-hora { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 34px; }
.pend-name { font-size: 14.5px; }
.pend-sub { margin-top: 2px; }
.pend-amt { flex: 0 0 auto; margin-left: auto; font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; padding-right: 4px; }
.pend-amt.is-ef { color: var(--error); }
.pend-ok { padding: 8px 11px; }
@media (max-width: 600px) {
.pend-hora { display: none; }
.pend-row { flex-wrap: wrap; row-gap: 6px; }
.pend-txt { flex: 1 1 60%; }
.pend-amt { margin-left: auto; }
.pend-ok, .pend-no { margin-left: auto; }
.pend-ok { margin-left: 0; }
.pend-row .pend-ok { order: 5; } .pend-row .pend-no { order: 6; }
.pend-row .pend-amt { order: 3; }
}
/* ===== Nora en la caja (chat de consulta) · v117 · mismo diseño que el chat del Horario ===== */
.nora-modal { max-width: 560px; height: 84vh; height: 84dvh; max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: 20px; }
.nora-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 44px; position: relative; flex: 0 0 auto; }
.nora-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, rgba(110,168,216,.35), rgba(212,175,55,.25)); border: 1px solid rgba(245,232,211,.15); flex: 0 0 auto; }
.nora-head-txt { min-width: 0; flex: 1; }
.nora-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; line-height: 1.15; }
.nora-lead { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nora-modal .modal-close { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
.nora-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.14); border: 1px solid rgba(245,232,211,.06); border-radius: 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nora-msgs .msg { max-width: 82%; background: rgba(0,0,0,.22); border: 1px solid rgba(245,232,211,.1); border-radius: 16px 16px 16px 5px; padding: 9px 13px; align-self: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.nora-msgs .msg.mio { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(180deg, rgba(212,175,55,.20), rgba(212,175,55,.12)); border-color: rgba(212,175,55,.3); }
.nora-msgs .msg.ia { background: linear-gradient(180deg, rgba(110,168,216,.16), rgba(110,168,216,.08)); border-color: rgba(110,168,216,.35); }
.nora-msgs .msg-meta { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--text-subtle); text-transform: uppercase; margin-bottom: 2px; opacity: .85; }
.nora-msgs .msg.ia .msg-meta { color: #8ecdfa; }
.nora-msgs .msg-txt { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.nora-typing { padding: 12px 14px !important; }
.nora-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #8ecdfa; animation: noraBlink 1.2s infinite; }
.nora-typing span:nth-child(2) { animation-delay: .2s; } .nora-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes noraBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.nora-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }
.nora-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.35); background: rgba(212,175,55,.08); color: var(--accent); cursor: pointer; }
.nora-chip:hover, .nora-chip:active { background: rgba(212,175,55,.2); }
.nora-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex: 0 0 auto; }
.nora-form input { flex: 1 1 auto; min-width: 0; width: auto; font: inherit; font-size: 16px; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(245,232,211,.12); background: rgba(0,0,0,.28); color: var(--text); outline: none; }
.nora-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nora-send-btn { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: var(--bg-deep); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; padding: 0; transition: .12s; }
.nora-send-btn svg { width: 18px; height: 18px; }
.nora-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,175,55,.3); }
@media (min-width: 900px) { .nora-modal { max-width: 820px; width: min(820px, 94vw); } }
@media (max-width: 720px) {
#modal-nora.modal-overlay { padding: 0; align-items: stretch; }
.nora-modal { max-width: none; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.nora-lead { display: none; }
.nora-avatar { width: 36px; height: 36px; font-size: 17px; }
}
/* ===== PWA instalada (iPhone / Android): barra de estado e indicador de inicio (Robert, 10-sep-2026) =====
Las ventanas a pantalla completa (Nora, fotos, cámara) se pegan al borde de la pantalla, así que
reservan arriba el hueco de la barra de estado; la de Nora llena la pantalla entera sin franja abajo. */
@media (max-width: 720px) {
.modal-overlay { padding-top: max(16px, env(safe-area-inset-top)); }
#modal-nora.modal-overlay { padding: 0; }
#modal-nora .nora-modal { position: absolute; inset: 0; height: auto; max-height: none; margin: 0; padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
.foto-viewer-overlay { padding: 0 !important; }
.foto-viewer-modal .modal-close, .foto-viewer-close { top: calc(10px + env(safe-area-inset-top)) !important; }
.camara-top { padding-top: calc(12px + env(safe-area-inset-top)); }
.toast { top: calc(20px + env(safe-area-inset-top)); }
}
/* ===== v119 · Revisión a fondo (10-sep-2026): iPhone y detalles ===== */
/* Variables que se definían a sí mismas (fondos que desaparecían en hover y en el desplegable de categoría) */
:root { --bg-deeper: #0a1e19; --bg-panel-head: #21483d; --bg-raised: #244a3f; --bg-raised-hover: #2c5648; --text-subtle: #8fa89c; }
.ocr-create-prov-cat-select { color-scheme: dark; }
.tx-time-leading { opacity: 1; }
/* iPhone hace zoom al enfocar campos de menos de 16px */
.time-range .time-input, .admin-search, .componente-row .form-input, .componente-row .form-select, .ocr-create-prov-cat-select { font-size: 16px; }
/* Campos nativos de fecha/hora que colapsaban de alto en iPhone */
.form-group input[type="date"], .form-group input[type="time"] { min-height: 48px; line-height: 20px; }
/* Estados hover que se quedaban pegados en pantallas táctiles */
@media (hover: none) {
.tx-item:hover, .lectura-x-row:hover, .tx-d-chip:hover, .tx-panel-header:hover, .nora-chip:hover, .nora-send-btn:hover, .admin-tab:hover, .admin-icon-btn:hover { transform: none !important; box-shadow: none !important; }
.history-item:hover:not(.current) { background: rgba(0,0,0,0.25); border: 1px solid var(--border); }
}
.history-item.current { box-shadow: inset 0 0 0 1px var(--accent); }
/* El desenfoque del fondo no aporta con un 88% de negro y cuesta batería en móvil */
@media (max-width: 540px) { .modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* ===== Parte del turno (24-sep-2026) · caja y página del personal ===== */
.panel.panel-parte { border-color: rgba(212,175,55,0.35); padding: 12px 14px; }
.parte-fecha { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.parte-turnos { display: flex; flex-direction: column; }
.parte-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.parte-row:first-child { border-top: none; }
.parte-row[data-ver] { cursor: pointer; }
.parte-row-txt { flex: 1 1 auto; min-width: 0; }
.parte-row-txt b { display: block; font-size: 14px; }
.parte-row-txt small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.parte-row.is-falta .parte-row-txt small { color: #e58b76; }
.parte-row.is-grave .parte-row-txt b::after { content: ' 🚨'; }
.parte-btn { width: auto !important; margin: 0 !important; padding: 9px 14px !important; font-size: 12px !important; white-space: nowrap; flex: 0 0 auto; }
.parte-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.parte-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.25); color: var(--text-muted); cursor: pointer; }
.parte-chip.on { background: rgba(212,175,55,0.16); border-color: rgba(212,175,55,0.5); color: var(--accent); }
.parte-item { background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-left: 3px solid rgba(212,175,55,0.5); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.parte-item.is-grave { border-left-color: var(--error); }
.parte-item.is-resuelta { opacity: .72; border-left-color: var(--success); }
.parte-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.parte-item-tipo { flex: 1 1 auto; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: var(--accent); }
.parte-item-x { appearance: none; border: 1px solid rgba(224,106,80,0.32); background: rgba(224,106,80,0.10); color: var(--error); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; }
.parte-item textarea.form-input { width: 100%; min-height: 56px; resize: vertical; font-size: 16px; }
.parte-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.parte-item-foot .btn { width: auto; margin: 0; padding: 8px 12px; font-size: 12px; }
.parte-grave { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.parte-grave input { width: 18px; height: 18px; accent-color: var(--error); }
.parte-item-txt { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.parte-item-nota { font-size: 12.5px; color: var(--success); margin-top: 6px; }
.parte-item-img { display: block; max-width: 160px; max-height: 160px; border-radius: 8px; margin-top: 8px; cursor: pointer; }
.parte-bien { font-size: 13px; color: var(--text-muted); padding: 8px 2px 4px; }
.parte-bien b { color: var(--success); }
.parte-resolver-btn { width: auto !important; margin: 0 !important; padding: 6px 11px !important; font-size: 11.5px !important; }
.parte-dictar { background: rgba(110,168,216,.08); border: 1px solid rgba(110,168,216,.3); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.parte-dictar textarea.form-input { width: 100%; margin: 8px 0; font-size: 16px; resize: vertical; }
.parte-dictar .btn { width: auto; margin: 0; padding: 9px 14px; font-size: 12.5px; }
.parte-mic { display: inline-flex !important; align-items: center; gap: 8px; }
.parte-mic.is-on { background: rgba(224,106,80,0.18) !important; border-color: var(--error) !important; color: #f7d3d3 !important; animation: parteMic 1.2s infinite; }
@keyframes parteMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,106,80,0.35); } 50% { box-shadow: 0 0 0 6px rgba(224,106,80,0); } }
.parte-rep-item { font-size: 12.5px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.05); line-height: 1.4; }
.parte-rep-item.is-grave { color: #f7d3d3; }
.parte-rep-item.is-resuelta { opacity: .7; }
.parte-rep-meta { display: block; font-size: 10.5px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 600px) { .panel.panel-parte { padding: 10px 12px; margin-bottom: 8px; } }
/* pastillas de estado (antes solo en subir.html; la caja las usa en los partes) */
.sub-estado { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.sub-estado.env { color: var(--accent); border-color: rgba(212,175,55,0.45); }
.sub-estado.ok { color: var(--success); border-color: rgba(76,175,125,0.45); }
.sub-estado.no { color: #e58b76; border-color: rgba(224,106,80,0.45); }
/* ===== Parte del turno v121: escritorio a dos columnas, pastilla Grave, botones fijos ===== */
.parte-grave-btn { appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.25); color: var(--text-muted); cursor: pointer; }
.parte-grave-btn.on { background: rgba(224,106,80,0.16); border-color: var(--error); color: #f7d3d3; }
.parte-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.parte-foot { position: sticky; bottom: -14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 12px 0; background: var(--bg-pub); border-top: 1px solid var(--border); z-index: 2; }
.parte-foot .btn { width: auto; margin: 0; padding: 12px 16px; font-size: 12.5px; white-space: nowrap; }
.parte-foot .sub-acts-r { display: flex; gap: 8px; }
#modal-parte .modal.parte-modal { max-width: 560px; }
@media (min-width: 900px) {
#modal-parte .modal.parte-modal { max-width: 860px; }
.parte-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.parte-items .parte-item { margin: 0; }
.parte-items .parte-item textarea.form-input { min-height: 48px; }
.parte-dictar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.parte-dictar textarea.form-input { margin: 0; min-height: 44px; }
.parte-dictar .ocr-status { grid-column: 1 / -1; }
#p-parte .parte-foot { bottom: 0; }
}
@media (max-width: 720px) {
.parte-foot { bottom: calc(-1 * env(safe-area-inset-bottom) - 12px); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
#p-parte .parte-foot { position: sticky; bottom: 0; }
}
/* ===== Partes del día: tira de una línea en la portada (Robert, 24-sep-2026) ===== */
.parte-strip { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 12px; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid rgba(212,175,55,0.35); border-radius: 14px; cursor: pointer; }
.parte-strip-title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; white-space: nowrap; }
.parte-strip-chips { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.parte-strip-chip { font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.parte-strip-chip.is-falta { color: #e58b76; border-color: rgba(224,106,80,0.45); }
.parte-strip-chip.is-abierta { color: var(--accent); border-color: rgba(212,175,55,0.45); }
.parte-strip-chip.is-grave { color: #f7d3d3; background: rgba(224,106,80,0.16); border-color: var(--error); }
.parte-strip-chip.is-ok { color: var(--success); border-color: rgba(76,175,125,0.45); }
.parte-strip-btn { width: auto !important; margin: 0 !important; padding: 7px 12px !important; font-size: 11.5px !important; flex: 0 0 auto; }
#modal-partes .parte-fecha { margin-left: 8px; font-family: 'Manrope', sans-serif; font-weight: 400; }
@media (max-width: 600px) { .parte-strip { padding: 8px 12px; margin-bottom: 8px; gap: 8px; } .parte-strip-title { font-size: 14px; } .parte-strip-btn { display: none; } }
.parte-borrar-btn { font-size: 11.5px !important; padding: 6px 10px !important; flex: 0 0 auto; }
/* ===== Parte v122: título en dorado, cuadros de texto más grandes, un solo item a todo el ancho, chip Sin incidencias ===== */
#parte-m-title, #parte-title, #pv-title { color: var(--accent); }
.parte-chip.is-sin { border-color: rgba(76,175,125,0.45); color: var(--success); background: rgba(76,175,125,0.08); }
.parte-chip.is-sin:hover { background: rgba(76,175,125,0.18); }
.parte-item textarea.form-input { min-height: 96px; line-height: 1.45; }
.parte-dictar textarea.form-input { min-height: 72px; }
#modal-parte .modal.parte-modal { padding-bottom: 0; }
#modal-parte .parte-foot { bottom: 0; margin-top: 12px; padding: 14px 0 18px; }
@media (min-width: 900px) {
.parte-items .parte-item:only-child, .parte-items .parte-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.parte-items .parte-item textarea.form-input { min-height: 110px; }
.parte-dictar textarea.form-input { min-height: 64px; }
}
/* ===== Informes › Incidencias (v123) ===== */
.report-mode { display: flex; gap: 6px; padding: 4px; margin-bottom: 10px; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 11px; width: max-content; max-width: 100%; }
.report-mode-btn { appearance: none; border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.report-mode-btn.active { background: var(--accent-soft); color: var(--accent); }
.inc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.inc-kpi { background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; text-align: center; }
.inc-kpi span { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.inc-kpi b { display: block; font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; margin-top: 2px; }
.inc-kpi small { display: block; font-size: 10.5px; color: var(--text-subtle); }
.inc-kpi.is-warn b { color: var(--accent); } .inc-kpi.is-bad b { color: var(--error); }
.inc-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inc-chip { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.2); color: var(--text-muted); cursor: pointer; }
.inc-chip b { font-weight: 800; color: var(--text); margin-left: 2px; }
.inc-chip.on { background: rgba(212,175,55,0.16); border-color: rgba(212,175,55,0.5); color: var(--accent); }
.parte-item-meta { font-size: 11.5px; color: var(--text-subtle); margin-top: 6px; }
.parte-item-nota-inline { color: var(--success); }
@media (max-width: 600px) { .report-mode { width: 100%; } .report-mode-btn { flex: 1; text-align: center; padding: 8px 6px; font-size: 12px; } .inc-kpis { grid-template-columns: repeat(3, 1fr); } }
/* v124: aire entre las incidencias, "Lo que fue bien" y los botones */
.parte-items { margin: 4px 0 18px; }
.parte-items .parte-item { margin-bottom: 0; }
#modal-parte .form-group:has(#pm-bien), #p-parte .form-group:has(#pt-bien) { margin-top: 4px; margin-bottom: 18px; }
#modal-parte .parte-foot { margin-top: 0; padding: 16px 0 22px; }
#p-parte .parte-foot { margin-top: 0; padding: 16px 0 18px; }
.method-option.is-hecho { opacity: .55; cursor: not-allowed; }
/* v126: tipos de incidencia agrupados en filas */
.parte-tipos { display: block; }
.parte-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.parte-grupo-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: var(--text-subtle); width: 100%; margin: 2px 0 -2px; }
@media (min-width: 900px) { .parte-grupo-label { width: 120px; margin: 0; text-align: right; padding-right: 4px; } }
/* ===== v127 · Móvil: categoría de la incidencia en una hoja desde abajo ===== */
.parte-add-btn { display: none; }
.cat-sheet { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.cat-sheet.open { pointer-events: auto; }
.cat-sheet-dim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity .2s; }
.cat-sheet.open .cat-sheet-dim { opacity: 1; }
.cat-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); transform: translateY(102%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.cat-sheet.open .cat-sheet-panel { transform: translateY(0); }
.cat-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
.cat-sheet-title { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; color: var(--accent); }
.cat-sheet-x { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(224,106,80,0.32); background: rgba(224,106,80,0.10); color: var(--error); font-size: 14px; cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; }
.cat-sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.cat-sheet-grp { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: var(--text-subtle); padding: 10px 4px 4px; }
.cat-sheet-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin-bottom: 6px; cursor: pointer; }
.cat-sheet-item b { display: block; font-size: 14.5px; }
.cat-sheet-item small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cat-sheet-item .cat-sheet-check { margin-left: auto; color: var(--accent); font-weight: 800; flex: 0 0 auto; }
.cat-sheet-item.on { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.10); }
@media (max-width: 720px) {
.parte-tipos .parte-grupo:not(:first-child) { display: none; } /* solo queda "Sin incidencias" */
.parte-add-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin: 0 0 12px; padding: 13px 14px !important; font-size: 13px !important; }
}
@media (max-width: 720px) {
#pt-cancel { display: none; } /* en móvil cierra la ✕ de arriba; que quepa "Enviar parte" */
#p-parte .parte-foot .btn, #modal-parte .parte-foot .btn { flex: 1 1 auto; padding: 12px 10px; }
#p-parte .parte-foot .sub-acts-r { flex: 1 1 auto; }
#p-parte .parte-foot .sub-acts-r .btn { width: 100%; }
.form-hint-inline.parte-hint-chips { display: none; }
}
/* ===== v128 · Cerrar caja en móvil: campos alineados, importes sin partir ===== */
#modal-cierre .form-row { align-items: end; }
#modal-cierre .form-row .form-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cierre-totals-row { gap: 12px; }
.cierre-totals-label { flex: 1 1 auto; min-width: 0; }
.cierre-totals-value { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.cierre-totals-hint { display: block; font-size: 11px; color: var(--text-subtle); font-weight: 400; margin-top: 2px; }
@media (max-width: 600px) {
.cierre-totals { padding: 12px 14px; }
.cierre-totals-row { font-size: 14px; }
.cierre-totals-row.highlight { padding: 12px; }
.cierre-totals-row.highlight .cierre-totals-label { font-size: 13px; letter-spacing: .8px; }
.cierre-totals-value.accent { font-size: 19px; }
}
.cierre-visa-total { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 16px; padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.cierre-visa-total b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
/* v129: "Terminar y salir" tras cerrar la caja */
.btn-salir-cierre { grid-column: 1 / -1; }
/* ======================================================================
v129 · Repaso de diseño en móvil (15-oct-2026). Solo aspecto.
====================================================================== */
/* Entrada: arriba, compacta, sin el amarillo del autocompletado del iPhone */
body.auth-on .fab-plus, body.auth-on #mv2-fabs, body.auth-on .sheet-nueva { display: none !important; }
.form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 60px #12302a inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 9999s;
}
.center-screen { min-height: 100vh; min-height: 100dvh; }
@media (max-width: 600px) {
#auth-container.center-screen { align-items: flex-start; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
#auth-container .container { padding: 28px 22px 24px; border-radius: 18px; }
#auth-container .brand { margin-bottom: 22px; }
#auth-container .brand-mark.has-logo { width: 72px; height: 72px; margin-bottom: 10px; }
#auth-container .brand-mark.has-logo.logo-wide { width: 170px; height: 46px; margin-bottom: 12px; }
#auth-container .brand-name { font-size: 28px; }
#auth-container .brand-app { margin-top: 10px; font-size: 20px; }
#auth-container .app-version { margin-top: 2px; }
#auth-container .form-group { margin-bottom: 14px; }
#auth-container #login-btn { margin-top: 6px; }
}
/* Abrir caja / caja ya abierta: icono propio y "Cerrar sesión" como texto, no como la ✕ */
.welcome-ico { width: 64px; height: 64px; margin: 4px auto 16px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.35); }
.welcome-salir { appearance: none; background: transparent; border: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Cabecera: en móvil los 6 botones caben (el mínimo de 44 px los echaba fuera) */
@media (max-width: 600px) {
.app-header-user { gap: 4px; }
.app-header .icon-btn { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
.app-header .icon-btn-badge { width: auto; padding: 0 7px !important; gap: 4px; }
.app-header-brand-mark.has-logo.logo-wide { width: 72px; height: 20px; }
}
@media (max-width: 360px) { .app-header .icon-btn { min-width: 32px; min-height: 32px; width: 32px; height: 32px; } }
/* Avisos: aparecen desde abajo centrados, sin salto */
@media (max-width: 540px) {
.toast { animation-name: toastInM; }
@keyframes toastInM { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
/* Parte (enlace del personal): barra de botones con margen del iPhone y sin dejar ver lo de detrás */
#p-parte .parte-foot { padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); margin: 0 -14px; }
#modal-parte .modal { scroll-padding-bottom: 96px; }
body { scroll-padding-bottom: 96px; }
/* Hover pegado al tocar: fondos y bordes neutros en pantallas táctiles */
@media (hover: none) {
.parte-chip.is-sin:hover { background: rgba(76,175,125,0.08); }
.nora-chip:hover { background: rgba(212,175,55,.08); }
.lectura-x-row:hover { border-color: var(--border); }
.tx-panel-header:hover { background: inherit; }
.btn:hover, .btn-secondary:hover { transform: none; box-shadow: none; filter: none; }
.tx-d-attach-tile:hover, .tx-details-fotos img:hover, .tx-details-pdf-tile:hover { transform: none !important; }
}
/* Zonas táctiles mínimas */
.parte-item-x, .lote-quitar, .pend-no { min-width: 36px; min-height: 36px; }
.parte-grave-btn, .parte-chip, .inc-chip { min-height: 36px; }
.camara-thumb button { min-width: 28px; min-height: 28px; }
.parte-resolver-btn, .parte-borrar-btn { min-height: 34px; }
/* Contraste */
.method-option.is-hecho { opacity: .7; }
.parte-item.is-resuelta { opacity: .85; }
/* Modales en móvil: sin doble hueco abajo */
@media (max-width: 540px) { .modal { margin-bottom: 0; } }
/* Hoja de categorías cerrada: no se puede tabular dentro */
.cat-sheet:not(.open) .cat-sheet-panel { visibility: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.cat-sheet-list { overscroll-behavior: contain; }
/* Parte en escritorio: "Sin incidencias" alineado con los grupos */
@media (min-width: 900px) { .parte-tipos .parte-grupo:first-child { padding-left: 126px; } }
/* Informes › Incidencias en móvil: 5 cifras sin fila coja */
@media (max-width: 600px) { .inc-kpis { grid-template-columns: repeat(2, 1fr); } .inc-kpis .inc-kpi:first-child { grid-column: 1 / -1; } }
/* Cerrar caja: el total tarjeta y las filas bien alineados en móvil */
@media (max-width: 600px) { #modal-cierre .form-row { gap: 10px; } .cierre-visa-total { margin-top: -4px; } }
body.sin-caja .fab-plus, body.sin-caja #mv2-fabs, body.sin-caja .sheet-nueva { display: none !important; }
.parte-strip-add { appearance: none; flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .4px; padding: 8px 12px; min-height: 34px; border-radius: 999px; border: none; background: var(--accent); color: var(--bg-deep); cursor: pointer; white-space: nowrap; }
.parte-strip-add.hidden { display: none; }
@media (max-width: 600px) { .parte-strip-add { display: inline-flex; align-items: center; } .parte-strip-add.hidden { display: none; } }
/* ======================================================================
v130 · Pulido visual móvil (15-oct-2026) — y escritorio/tablet a juego.
Solo aspecto: no cambia textos, ids ni el funcionamiento. Lo de móvil va
en @media (max-width: 600px); lo de escritorio y tablet en (min-width: 601px).
====================================================================== */
/* ---- Global: ✕ de cerrar del mismo tamaño en toda la app ---- */
.modal-close { min-width: 0 !important; min-height: 0 !important; width: 36px; height: 36px; }
.modal-header .modal-close { width: 36px; height: 36px; }
@media (max-width: 600px) {
.modal-close, .modal-header .modal-close,
#modal-admin .modal-header .modal-close, #modal-admin-edit .modal-header .modal-close,
#modal-reports .modal-header .modal-close, #modal-history .modal-header .modal-close,
#modal-tx-details .modal-header .modal-close { width: 34px; height: 34px; }
.modal-header .modal-close::before, .modal-header .modal-close::after { width: 13px; }
}
/* ---- Global: importes que nunca se parten en dos líneas ---- */
.cierre-summary-row { gap: 12px; align-items: baseline; }
.cierre-summary-label { flex: 1 1 auto; min-width: 0; }
.cierre-summary-value, .cs-value, .report-value, .report-card-value, .history-stat-v,
.pend-amt, .day-summary-value, .lectura-x-row .row-amount, .tx-d-amount, .cierre-totals-value {
white-space: nowrap;
}
.cierre-summary-value { flex: 0 0 auto; text-align: right; }
.report-row { gap: 12px; }
.report-label { flex: 1 1 auto; min-width: 0; }
.report-value { flex: 0 0 auto; text-align: right; }
/* ---- Global: textos de ayuda bajo un campo (no estaban definidos y salían a 16 px) ---- */
.form-hint { font-size: 12px; line-height: 1.45; color: var(--text-subtle); margin-top: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* ---- Global: casillas de verificación propias (sin el cuadro blanco del navegador) ---- */
.modal input[type="checkbox"], .panel input[type="checkbox"] {
-webkit-appearance: none; appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0;
border-radius: 6px; border: 1.5px solid var(--border-strong); background: rgba(0,0,0,0.28);
cursor: pointer; vertical-align: middle; transition: background 0.15s, border-color 0.15s;
}
.modal input[type="checkbox"]:checked, .panel input[type="checkbox"]:checked {
border-color: var(--accent);
background: var(--accent) url("data:image/svg+xml;utf8,") center / 15px no-repeat;
}
.parte-grave { gap: 10px; }
/* ---- Global: los campos de hora llevan reloj, no calendario ---- */
input[type="time"]::-webkit-calendar-picker-indicator {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---- Global: títulos de sección con menos separación entre letras (se leían a trozos) ---- */
.report-section-title, .cierre-summary-section-title { letter-spacing: 1.2px; line-height: 1.4; }
/* ---- Abrir caja / Caja ya abierta: la hora con la misma letra que el resto ---- */
#abrir-caja-hora, #ya-abierta-hora { font-family: 'Manrope', system-ui, sans-serif !important; font-variant-numeric: tabular-nums; font-size: 14px; }
/* ---- Tarjeta de la caja: lápiz de la fecha dibujado, no un emoji ---- */
.hora-edit-btn {
font-size: 0 !important; color: transparent; width: 28px; height: 28px; padding: 0; margin-left: 8px;
display: inline-flex; vertical-align: middle; border-radius: 50%; opacity: 0.85;
border: 1px solid var(--border);
background: transparent url("data:image/svg+xml;utf8,") center / 14px no-repeat;
}
@media (hover: hover) { .hora-edit-btn:hover { opacity: 1; background-color: rgba(245,232,211,0.08); border-color: var(--border-strong); } }
/* ---- Caja cerrada: aviso "solo lectura" ordenado ---- */
@media (max-width: 600px) {
.viewing-banner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
.viewing-banner > div { flex-wrap: nowrap !important; }
.viewing-banner-btn { flex: 1 1 0; padding: 9px 10px; font-size: 12px; text-align: center; white-space: nowrap; }
}
/* ---- Caja cerrada: botones del cierre ---- */
@media (min-width: 621px) {
/* escritorio y tablet: a tamaño natural, a la izquierda; "Terminar y salir" a la derecha */
#cierre-actions-top { display: flex; flex-wrap: wrap; gap: 8px; }
#cierre-actions-top .btn { flex: 0 0 auto; width: auto; min-width: 0; padding: 9px 16px; }
#cierre-actions-top .btn-salir-cierre { margin-left: auto; }
}
@media (max-width: 620px) {
/* móvil: PDF (el importante) a lo ancho, el resto de dos en dos, salir a lo ancho */
#cierre-actions-top #btn-download-pdf { grid-column: 1 / -1; }
#cierre-actions-top .btn { min-height: 42px; }
}
/* ---- Partes del día (tira de la portada): nada se monta encima del botón ---- */
.parte-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.parte-strip-chips { min-width: 0; }
.parte-strip-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
.parte-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "c c"; row-gap: 8px; padding: 10px 12px; }
.parte-strip-title { grid-area: t; }
.parte-strip-chips { grid-area: c; }
.parte-strip-add { grid-area: b; }
}
/* ---- Pendientes de confirmar ---- */
.pend-thumb.is-pdf { background: rgba(224,106,80,0.14); color: #f08a72; border: 1px solid rgba(224,106,80,0.4); letter-spacing: 0.8px; }
.pend-thumb.is-pdf:empty {
border-color: var(--border);
background: rgba(255,255,255,0.05) url("data:image/svg+xml;utf8,") center / 20px no-repeat;
}
.pend-ok { min-height: 34px; }
@media (max-width: 600px) {
/* foto · nombre/detalle · importe arriba; Revisar y ✕ juntos a la derecha debajo */
.panel-pend .pend-row {
display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
column-gap: 10px; row-gap: 8px; align-items: center; padding: 12px 0;
}
.panel-pend .pend-thumb { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.panel-pend .pend-txt { grid-column: 2; grid-row: 1; min-width: 0; }
.panel-pend .pend-amt { grid-column: 3; grid-row: 1; align-self: start; margin: 0; padding: 2px 0 0; font-size: 15.5px; }
.panel-pend .pend-ok { grid-column: 2 / -1; grid-row: 2; justify-self: end; margin: 0 44px 0 0; }
.panel-pend .pend-no { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
.panel-pend .pend-hint { margin-top: 4px; }
}
/* ---- "Transacciones del día": sin la franja vacía de arriba en escritorio y tablet ---- */
@media (min-width: 601px) {
.panel.panel-tx { padding-top: 0; }
.panel.panel-tx .tx-panel-header { margin: 0 -24px 16px; padding: 14px 24px; border-radius: 12px 12px 0 0; background: var(--bg-card); }
/* enlace del personal: la cabecera del parte no se sale del panel */
.panel.panel-parte { padding-top: 0; }
.panel.panel-parte .tx-panel-header { margin: 0 -14px 8px; padding: 12px 14px; border-radius: 12px 12px 0 0; background: var(--bg-card); }
/* filas de transacciones más compactas (el lápiz ya no las estira a 68 px) */
.tx-item { padding-top: 9px !important; padding-bottom: 9px !important; }
.tx-item .tx-menu-btn { min-width: 34px; min-height: 34px; width: 34px; height: 34px; padding: 0; }
}
@media (max-width: 600px) {
.panel.panel-parte .tx-panel-header {
margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; position: static;
background: rgba(0,0,0,0.22); border: 1px solid var(--border); box-shadow: none;
}
.tx-item .tx-menu-btn { min-height: 36px; height: 36px; }
}
/* ---- Resumen del cierre ---- */
@media (max-width: 600px) {
.cs-label .cs-hint { display: block; margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
.cs-row { padding: 6px 0; }
.cs-row.highlight .cs-label { font-size: 12px; letter-spacing: 0.3px; line-height: 1.35; }
.cierre-summary-section { padding: 12px 14px; }
}
@media (min-width: 900px) {
/* escritorio: ventas y cálculo del efectivo uno al lado del otro */
#cierre-summary-panel .cierre-summary-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
#cierre-summary-panel .cierre-summary-section:first-child,
#cierre-summary-panel .cierre-summary-section:nth-child(n+4) { grid-column: 1 / -1; }
}
/* ---- Nueva transacción (elegir tipo): en móvil una lista continua que cabe sin desplazar ---- */
@media (max-width: 600px) {
#modal-picker .tx-types-grid, #p-tipo .tx-types-grid {
gap: 0; background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
#modal-picker .tx-type-btn, #p-tipo .tx-type-btn {
background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0;
padding: 11px 14px; gap: 12px;
}
#modal-picker .tx-type-btn:last-child, #p-tipo .tx-type-btn:last-child { border-bottom: 0; }
#modal-picker .tx-type-btn:active, #p-tipo .tx-type-btn:active { background: rgba(212,175,55,0.10); }
#modal-picker .tx-type-btn-icon, #p-tipo .tx-type-btn-icon { width: 38px; height: 38px; }
#modal-picker .tx-type-btn-icon svg, #p-tipo .tx-type-btn-icon svg { width: 19px; height: 19px; }
#modal-picker .tx-type-btn-title, #p-tipo .tx-type-btn-title { font-size: 14.5px; margin-bottom: 1px; }
#modal-picker .tx-type-btn-desc, #p-tipo .tx-type-btn-desc { font-size: 11.5px; letter-spacing: 0.2px; }
#modal-picker .picker-upload { padding: 11px 14px; border-radius: 14px; }
#modal-picker .picker-upload-ico { width: 40px; height: 40px; }
}
/* ---- Formulario de transacción: botón de la IA con el texto bien alineado ---- */
.btn-scan-ai { letter-spacing: 0; line-height: 1.25; text-align: left; }
@media (max-width: 600px) {
.btn-scan-ai { justify-content: flex-start; padding: 12px 14px; font-size: 13.5px; gap: 10px; }
}
/* ---- Detalles: adjuntos centrados de verdad y todos del mismo tamaño (formato folio) ---- */
#modal-tx-details .tx-d-attach-grid { grid-template-columns: repeat(auto-fit, 124px); align-items: start; }
#modal-tx-details .tx-d-attach-tile, #modal-tx-details .tx-d-attach-grid.is-1 .tx-d-attach-tile { aspect-ratio: 3 / 4; width: 100%; height: auto; min-height: 0; }
@media (max-width: 600px) { #modal-tx-details .tx-d-attach-grid { grid-template-columns: repeat(auto-fit, 96px); } }
/* ---- Lecturas X: filas más recogidas ---- */
.lectura-x-row .row-meta { gap: 2px 10px; }
@media (max-width: 600px) {
.lectura-x-row { gap: 10px; padding: 10px 12px; }
.lectura-x-row .row-meta { font-size: 11.5px; }
.lectura-x-row .row-amount { min-width: 0; }
}
/* ---- Informes: el selector fijo ya no pinta una franja encima ---- */
@media (max-width: 600px) {
#modal-reports .report-period-picker { top: 29px; box-shadow: 0 8px 14px -8px rgba(0,0,0,0.5); }
.report-section { padding: 14px; }
}
/* ---- Administración ---- */
@media (min-width: 601px) {
#modal-admin .modal-title { font-size: 22px; opacity: 1; }
}
@media (max-width: 600px) {
/* las seis pestañas a la vista (3 + 3), sin tener que deslizar */
#modal-admin .admin-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; overflow: visible; }
#modal-admin .admin-tabs .admin-tab { min-width: 0; padding: 9px 4px; font-size: 10.5px; letter-spacing: 0.4px; text-align: center; }
/* Activos / Archivados / Papelera caben enteros también a 360 px */
#modal-admin .view-mode-btn { letter-spacing: 0.2px; gap: 4px; padding: 6px 4px; }
/* botones de Excel con su nombre entero */
#modal-admin .admin-toolbar-extra .btn-mini {
white-space: normal; overflow: visible; text-overflow: clip; text-transform: none;
letter-spacing: 0.2px; font-size: 11.5px; line-height: 1.2; padding: 7px 6px; min-height: 38px;
}
}
/* las fichas como una lista continua, no tarjetas sueltas */
.admin-list { gap: 0; }
.admin-list > .admin-item { margin: 0; border-radius: 0; border-top-width: 0; background: rgba(0,0,0,0.18); }
.admin-list > .admin-item:first-child,
.admin-list > :not(.admin-item) + .admin-item { border-top-width: 1px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.admin-list > .admin-item:last-child,
.admin-list > .admin-item:has(+ :not(.admin-item)) { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
@media (hover: hover) {
.admin-list > .admin-item:hover { border-color: var(--border); background: rgba(212,175,55,0.08); }
}
/* ---- Enlace del personal (subir.html) ---- */
@media (max-width: 600px) {
#pt-dictado { min-height: 100px; }
#p-parte .modal-title, #p-check .modal-title, #p-tipo .modal-title, #p-parte-ver .modal-title { font-size: 20px; line-height: 1.2; }
}
/* ======================================================================
v131 (15-oct-2026) · menú "Más" en el móvil, iconos en botones
====================================================================== */
.btn-ico { display: inline-flex; vertical-align: -2px; margin-right: 7px; }
.btn-ico svg { display: block; }
.tx-foto-add-icon svg { display: block; }
#app-mas-btn { display: none; }
.app-header-user { position: relative; }
.menu-mas { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; min-width: 210px; padding: 6px; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-pub) 100%); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 14px 32px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.menu-mas.hidden { display: none; }
.menu-mas button { appearance: none; text-align: left; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); background: transparent; border: none; border-radius: 8px; padding: 12px 14px; cursor: pointer; }
.menu-mas button.hidden { display: none; }
.menu-mas button:active { background: rgba(212,175,55,.12); }
@media (hover: hover) { .menu-mas button:hover { background: rgba(212,175,55,.10); } }
@media (max-width: 600px) {
#app-reports-btn, #app-history-btn, #app-admin-btn { display: none !important; }
#app-mas-btn { display: inline-flex; }
}
/* ======================================================================
v132 (16-oct-2026) · Cabecera con pestañas, igual en móvil, tablet y PC
====================================================================== */
.app-header { flex-wrap: wrap; row-gap: 10px; padding-bottom: 10px; }
.app-tabs { flex: 1 0 100%; display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,.26); border: 1px solid var(--border); border-radius: 12px; }
.app-tab { appearance: none; flex: 1 1 0; min-width: 0; min-height: 40px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.app-tab.active { background: var(--accent); color: var(--bg-deep); }
.app-tab.hidden { display: none; }
@media (hover: hover) { .app-tab:not(.active):hover { color: var(--text); background: rgba(245,232,211,.06); } }
/* En la cabecera quedan Lecturas X · Nora · Salir; Historial, Informes y Ajustes viven en las pestañas */
#app-reports-btn, #app-history-btn, #app-admin-btn, #app-mas-btn, #menu-mas { display: none !important; }
.app-header-user { margin-left: auto; }
@media (min-width: 721px) {
.app-tabs { flex: 0 1 auto; width: auto; min-width: 420px; }
.app-tab { flex: 1 1 auto; padding: 0 22px; }
.app-header { padding-bottom: 12px; }
}
@media (max-width: 720px) {
.app-header { padding: 10px 12px 10px; row-gap: 8px; }
.app-header-brand-text { display: block; font-size: 15px; letter-spacing: 1px; }
.app-header-brand-mark.has-logo { width: 38px; height: 38px; }
.app-header-brand-mark.has-logo.logo-wide { width: 92px; height: 26px; }
.app-header-brand-mark.has-logo.logo-wide + .app-header-brand-text { display: none; }
.app-tab { min-height: 38px; font-size: 12.5px; letter-spacing: .4px; }
}
@media (max-width: 380px) { .app-tab { font-size: 11.5px; letter-spacing: .2px; } }
/* ============================================================================
v134 · Páginas y vuelta al aspecto v132 (16-oct-2026)
Robert: «parece que es como sobre la app, no parte de la app» y «la página
normal de caja tampoco me gusta como quedó» → fuera el bloque v133 (se
conservan solo los iconos dibujados de las lecturas X y del estado vacío) y
Historial · Informes · Ajustes pasan a ser páginas dentro de la app: se
abren bajo la cabecera, al ancho de la caja, y la página entera hace scroll.
============================================================================ */
/* Vacío: icono dibujado, no emoji */
.empty-state-icon { font-size: 0; color: transparent; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: rgba(212,175,55,0.10) url("data:image/svg+xml;utf8,") center / 22px no-repeat; opacity: 1; }
.empty-state-text { color: var(--text-muted); }
/* Lecturas X: icono dibujado por tramo (antes un emoji distinto en cada fila) */
.lectura-x-row .row-icon { position: relative; font-size: 0; color: var(--accent); width: 36px; height: 36px; border-radius: var(--r-btn); background: rgba(212,175,55,0.12); flex: 0 0 auto; }
.lectura-x-row .row-icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor;
-webkit-mask: var(--ico) center / 20px no-repeat; mask: var(--ico) center / 20px no-repeat; }
.lectura-x-row.done .row-icon { color: #7fd6a6; background: rgba(76,175,125,0.12); }
.lectura-x-row:disabled .row-icon { color: var(--text-muted); background: rgba(255,255,255,0.05); }
.lectura-x-row[data-tramo="desayuno"] .row-icon { --ico: url("data:image/svg+xml;utf8,"); }
.lectura-x-row[data-tramo="almuerzo"] .row-icon { --ico: url("data:image/svg+xml;utf8,"); }
.lectura-x-row[data-tramo="bingo"] .row-icon { --ico: url("data:image/svg+xml;utf8,"); }
.lectura-x-row[data-tramo="cena"] .row-icon { --ico: url("data:image/svg+xml;utf8,"); }
.lectura-x-row[data-tramo="banda"] .row-icon { --ico: url("data:image/svg+xml;utf8,"); }
/* ---- Páginas (los tres paneles de las pestañas) ---- */
.modal-overlay.pagina { position: static; inset: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; display: block; padding: 0; z-index: auto; animation: fadeUp .3s ease; overscroll-behavior: auto; margin-bottom: 16px; }
#modal-history.pagina .modal, #modal-reports.pagina .modal, #modal-admin.pagina .modal {
width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; max-height: none !important;
overflow: visible !important; overscroll-behavior: auto; touch-action: auto; animation: none; margin: 0;
border-radius: 14px; border: 1px solid var(--border); padding: 24px;
}
#modal-history.pagina .modal-header, #modal-reports.pagina .modal-header, #modal-admin.pagina .modal-header {
position: static; height: auto; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--border);
border-radius: 0; box-shadow: none; background: none; align-items: center;
}
#modal-history.pagina .modal-header .modal-close, #modal-reports.pagina .modal-header .modal-close, #modal-admin.pagina .modal-header .modal-close { display: none; }
/* Ajustes: las pestañas interiores se quedan arriba al hacer scroll, con fondo sólido (antes se veía la lista por detrás) */
#modal-admin.pagina .admin-tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg-card); box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); }
#modal-reports.pagina .report-period-picker { top: env(safe-area-inset-top, 0px); background: var(--bg-card); }
/* Con una página abierta, la caja y sus botones no se ven */
body.en-pagina #app-shell > :not(.app-header):not(.pagina) { display: none !important; }
body.en-pagina .fab-scan { display: none !important; }
@media (max-width: 600px) {
#modal-history.pagina .modal, #modal-reports.pagina .modal, #modal-admin.pagina .modal { padding: 16px 14px 18px; border-radius: 12px; }
#modal-history.pagina .modal-header, #modal-reports.pagina .modal-header, #modal-admin.pagina .modal-header { margin-bottom: 12px; padding-bottom: 10px; }
.modal-overlay.pagina { margin-bottom: 8px; }
}
/* ============================================================================
v135 · Barra inferior en el móvil (opción A, Robert 16-oct-2026)
Caja · Historial · [+] · Informes · Ajustes, como Remesas y Reseñas. Solo
≤600 px: en tablet y PC siguen las pestañas de arriba. El + es el mismo
#fab-plus de siempre, colocado en el hueco del centro de la barra.
============================================================================ */
.nav-inf { display: none; }
@media (max-width: 600px) {
.app-tabs { display: none !important; }
.app-header { padding-bottom: 12px; }
.app-shell { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
.action-buttons { padding-bottom: 8px !important; }
.nav-inf {
display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
padding: 4px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
background: #102b25; border-top: 1px solid var(--border);
box-shadow: 0 -10px 24px rgba(0,0,0,0.35);
}
.nav-inf-lado { flex: 1 1 0; display: flex; justify-content: space-around; min-width: 0; }
.nav-inf-hueco { flex: 0 0 76px; }
.nav-inf-btn {
appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 6px 0 4px; margin: 0;
flex: 1 1 0; max-width: 92px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; line-height: 1;
cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s;
}
.nav-inf-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }
.nav-inf-btn.active { color: var(--accent); }
.nav-inf-btn.active svg { stroke-width: 2.1; }
.nav-inf-btn:active { transform: scale(0.94); }
.nav-inf-btn:focus-visible { outline: 2px solid rgba(212,175,55,0.6); outline-offset: -2px; border-radius: 10px; }
.nav-inf-btn.hidden { display: none; }
body:not(.app-ready) .nav-inf, body.teclado .nav-inf, body.teclado .fab-plus { display: none !important; }
/* el + en el hueco del centro, un poco por encima de la barra */
.fab-plus { right: auto; left: calc(50% - 29px); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1210;
box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 0 5px #102b25; }
}
/* ============================================================================
v136 · Móvil fino, como una app profesional (16-oct-2026)
Robert: «muy anchas las líneas», «muchas pestañas en Ajustes», «la X y
Cancelar / Guardar un poco brutos, grandes: más fino», «que se pueda trabajar
como en una app profesional en móvil». TODO va dentro de ≤600 px: tablet y PC
no cambian (se miran después).
============================================================================ */
.solo-movil { display: none; }
.admin-mas, .admin-mas-menu { display: none; }
@media (max-width: 600px) {
:root { --hoja-bg: #183a31; --hoja-borde: rgba(255,255,255,0.08); }
.solo-movil { display: inline; }
.solo-pc { display: none; }
/* ---------- Cabecera: plana, sin tarjeta ---------- */
.app-header { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 2px 10px !important; margin-bottom: 4px !important; border-radius: 0 !important; }
.app-header .icon-btn { width: 38px; height: 38px; border-radius: 12px; border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.app-header-brand-text { font-size: 17px !important; letter-spacing: 1px !important; }
.app-header-brand-mark { width: 34px !important; height: 34px !important; }
/* ---------- Barra inferior más fina ---------- */
.nav-inf { padding: 2px max(4px, env(safe-area-inset-left)) max(4px, calc(env(safe-area-inset-bottom) - 14px)) max(4px, env(safe-area-inset-right)); background: rgba(14,38,32,0.97); }
.nav-inf-btn { min-height: 50px; font-size: 10.5px; gap: 3px; letter-spacing: 0.2px; font-weight: 600; }
.nav-inf-btn svg { width: 22px; height: 22px; }
.nav-inf-btn.active { font-weight: 700; }
.nav-inf-hueco { flex-basis: 70px; }
.fab-plus { width: 52px !important; height: 52px !important; left: calc(50% - 26px) !important; bottom: calc(max(4px, calc(env(safe-area-inset-bottom) - 14px)) + 12px) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 4px rgba(14,38,32,0.97) !important; }
.fab-plus-ico { width: 20px; height: 20px; }
.fab-plus-ico::before { width: 20px; height: 2.4px; }
.fab-plus-ico::after { width: 2.4px; height: 20px; }
.app-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
.app-shell { padding-left: max(14px, env(safe-area-inset-left)) !important; padding-right: max(14px, env(safe-area-inset-right)) !important; }
#modal-admin.pagina .admin-tabs { margin-left: -14px !important; margin-right: -14px !important; padding-left: 14px !important; padding-right: 14px !important; }
body.viendo-otra .fab-plus { display: none !important; }
/* ---------- Paneles de la caja: menos caja dentro de caja ---------- */
.panel { border-radius: 14px; }
.panel-caja { padding: 12px 14px !important; }
.panel-caja .panel-title { font-size: 18px !important; }
.panel-tx { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.tx-panel-header { border-radius: 14px; padding: 10px 14px !important; min-height: 0 !important; }
.tx-panel-title { font-size: 17px !important; }
/* filas de transacción: más bajas, como un extracto del banco */
.tx-item { min-height: 48px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.tx-title { font-size: 14.5px !important; }
.tx-amount { font-size: 15.5px !important; }
.tx-time-leading { font-size: 11.5px !important; min-width: 38px; line-height: 1.15; }
.tx-time-leading.otro-dia b { display: block; font-size: 10px; font-weight: 700; color: #e0a37a; letter-spacing: 0.2px; }
.tx-late-wrap { display: none !important; }
.tx-group-header { padding-top: 9px !important; padding-bottom: 9px !important; }
.tx-menu-btn { width: 34px !important; height: 34px !important; }
/* pendientes y partes: filas más compactas */
.pend-item, .pend-row { padding-top: 10px !important; padding-bottom: 10px !important; }
.parte-strip { padding: 10px 14px !important; }
/* ---------- Hojas (ventanas) que suben desde abajo ---------- */
.modal-overlay:not(.pagina):not(#modal-nora) { align-items: flex-end !important; padding: 0 !important; padding-top: max(24px, env(safe-area-inset-top)) !important; }
.modal-overlay:not(.pagina):not(#modal-nora) > .modal {
width: 100% !important; max-width: 100% !important; margin: 0 !important;
max-height: calc(100dvh - max(24px, env(safe-area-inset-top))) !important;
border-radius: 20px 20px 0 0 !important; border: 0 !important; border-top: 1px solid var(--hoja-borde) !important;
background: var(--hoja-bg) !important; box-shadow: 0 -12px 40px rgba(0,0,0,0.5) !important;
padding: 0 16px calc(14px + env(safe-area-inset-bottom)) !important;
animation: hojaSube 0.26s cubic-bezier(0.2,0.8,0.2,1) !important;
}
@keyframes hojaSube { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
/* asa de arrastre (solo decorativa) */
.modal-overlay:not(.pagina):not(#modal-nora) > .modal::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 8px auto 0; }
/* cabecera de la hoja: fija arriba al bajar, título y X finos */
.modal-overlay:not(.pagina):not(#modal-nora) .modal-header {
position: sticky !important; top: 0 !important; z-index: 6; height: auto !important; min-height: 0 !important;
margin: 0 -16px 12px !important; padding: 8px 16px 10px !important; background: var(--hoja-bg) !important;
border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--hoja-borde) !important; align-items: center !important;
}
.modal-title { font-size: 19px !important; line-height: 1.2 !important; }
.modal-close, .modal-header .modal-close {
width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,0.09) !important; color: var(--text-muted) !important;
font-size: 13px !important; line-height: 30px !important; box-shadow: none !important; flex: 0 0 auto;
}
/* pie de botones: siempre visible abajo, botones finos */
.modal-overlay:not(.pagina):not(#modal-nora) .form-actions,
.modal-overlay:not(.pagina):not(#modal-nora) .tx-d-footer {
position: sticky !important; bottom: calc(-14px - env(safe-area-inset-bottom)) !important; z-index: 6;
margin: 14px -16px calc(-14px - env(safe-area-inset-bottom)) !important;
padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
background: var(--hoja-bg) !important; border-top: 1px solid var(--hoja-borde) !important;
display: flex !important; gap: 10px !important; flex-wrap: wrap;
}
.modal .form-actions .btn, .modal .tx-d-footer .btn, .modal .form-actions button.btn {
min-height: 44px !important; height: 44px !important; padding: 0 16px !important; border-radius: 12px !important;
font-size: 14.5px !important; letter-spacing: 0.2px !important; text-transform: none !important; font-weight: 700 !important; flex: 1 1 0; width: auto !important;
}
/* pies con botones propios (Detalles, lote, parte): mismo alto y forma que el resto */
.modal .tx-d-footer > button, .modal .parte-foot > .btn {
flex: 1 1 0 !important; min-height: 44px !important; height: 44px !important; border-radius: 12px !important; padding: 0 14px !important;
font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; text-transform: none !important; width: auto !important;
}
.modal .tx-d-footer > .btn-text-danger { border: 1px solid rgba(224,106,80,0.40) !important; background: none !important; color: #e8907c !important; }
.modal .tx-d-footer > .btn-outline-gold { border: 1px solid rgba(212,175,55,0.55) !important; background: rgba(212,175,55,0.08) !important; color: var(--accent) !important; }
#modal-parte .parte-foot {
position: sticky !important; bottom: calc(-14px - env(safe-area-inset-bottom)) !important; z-index: 6; display: flex !important; gap: 10px !important;
margin: 14px -16px calc(-14px - env(safe-area-inset-bottom)) !important; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
background: var(--hoja-bg) !important; border-top: 1px solid var(--hoja-borde) !important;
}
/* pie partido (Editar empleado / proveedor): arriba las acciones que quitan, discretas; abajo Cancelar · Guardar */
.modal .form-actions-split { flex-direction: column !important; gap: 6px !important; }
.modal .form-actions-split .form-actions-left { display: flex; justify-content: center; gap: 4px; order: 0; }
.modal .form-actions-split .form-actions-right { display: flex; gap: 10px; order: 1; width: 100%; }
.modal .form-actions-split .form-actions-left.vacio { display: none; }
.modal .form-actions-split .form-actions-left .btn {
flex: 0 0 auto !important; min-height: 34px !important; height: 34px !important; padding: 0 12px !important;
background: none !important; border: 0 !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 600 !important;
}
.modal .form-actions-split .form-actions-left .btn-danger { color: #e8907c !important; }
.modal .form-actions-split .form-actions-left .btn-secondary { color: var(--accent) !important; }
/* campos de formulario dentro de las hojas */
.modal input[type="text"], .modal input[type="email"], .modal input[type="tel"], .modal input[type="number"],
.modal input[type="time"], .modal input[type="date"], .modal input:not([type]), .modal select, .modal .asel-btn {
min-height: 46px !important; height: 46px; border-radius: 12px !important; font-size: 16px !important; padding-top: 0; padding-bottom: 0;
}
.modal textarea { border-radius: 12px !important; font-size: 16px !important; }
.modal label, .modal .form-label { font-size: 11px !important; letter-spacing: 1px !important; margin-bottom: 6px !important; }
.modal .form-group { margin-bottom: 14px !important; }
.btn-scan-ai { min-height: 46px !important; border-radius: 12px !important; }
/* ---------- Páginas: planas, del ancho de la pantalla ---------- */
#modal-history.pagina .modal, #modal-reports.pagina .modal, #modal-admin.pagina .modal {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 0 !important; border-radius: 0 !important;
}
#modal-history.pagina .modal-header, #modal-reports.pagina .modal-header, #modal-admin.pagina .modal-header { border-bottom: 0 !important; margin-bottom: 8px !important; padding: 0 2px !important; }
.pagina .modal-title { font-size: 26px !important; }
/* Historial: filas compactas (fecha y estado; cifras en una línea) */
#modal-history.pagina .modal > p { display: none; }
#modal-history .history-item { padding: 12px 14px !important; margin-bottom: 8px !important; border-radius: 14px !important; }
#modal-history .history-item-date { font-size: 15px !important; }
#modal-history .history-item-status { font-size: 10px !important; padding: 3px 8px !important; letter-spacing: 1px !important; }
#modal-history .history-item-meta { font-size: 12px !important; margin-top: 2px !important; gap: 4px 10px !important; }
#modal-history .history-stats { display: flex !important; gap: 0 !important; margin-top: 10px !important; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); background: none !important; }
#modal-history .history-stat { flex: 1 1 0; background: none !important; border: 0 !important; padding: 0 !important; min-width: 0; }
#modal-history .history-stat-k { font-size: 10px !important; letter-spacing: 0.8px !important; margin-bottom: 2px !important; }
#modal-history .history-stat-v { font-size: 14px !important; }
/* Informes: tarjetas más bajas */
#modal-reports .report-card { padding: 12px 14px !important; border-radius: 14px !important; }
#modal-reports .report-card-value { font-size: 20px !important; }
#modal-reports .report-card-label { font-size: 10px !important; }
#modal-reports .report-card-sub { font-size: 11.5px !important; }
#modal-reports .report-section { padding: 12px 14px !important; border-radius: 14px !important; }
#modal-reports .report-row, #modal-reports .rp-row { min-height: 40px; }
#modal-reports .report-mode-btn, #modal-reports .rp-mobile button { min-height: 38px !important; }
/* Ajustes: un solo carril de filtros que se desliza, fijo arriba */
#modal-admin.pagina .modal { display: flex !important; flex-direction: column; }
#modal-admin.pagina .app-version-admin { order: 99; text-align: center; margin: 18px 0 4px; }
#modal-admin.pagina .admin-tabs {
display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
gap: 8px !important; margin: 0 -12px 12px !important; padding: 8px 12px !important; border: 0 !important; border-radius: 0 !important;
background: var(--bg-deep) !important; box-shadow: 0 8px 12px -10px rgba(0,0,0,0.7) !important; top: env(safe-area-inset-top, 0px) !important; height: auto !important;
}
#modal-admin.pagina .admin-tabs::-webkit-scrollbar { display: none; }
#modal-admin.pagina .admin-tab {
flex: 0 0 auto !important; height: 34px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 17px !important;
font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; box-shadow: none !important;
}
#modal-admin.pagina .admin-tab.active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg-deep) !important; font-weight: 700 !important; }
/* buscador + Nuevo + menú ⋯ (Plantilla / Exportar / Subir Excel van dentro) */
#modal-admin .admin-section { position: relative; }
#modal-admin .admin-toolbar { gap: 8px !important; margin-bottom: 10px !important; align-items: center; }
#modal-admin .admin-search { height: 44px !important; min-height: 44px !important; border-radius: 12px !important; font-size: 16px !important; }
#modal-admin .admin-toolbar .btn { height: 44px !important; min-height: 44px !important; padding: 0 14px !important; border-radius: 12px !important; font-size: 14px !important; letter-spacing: 0.2px !important; text-transform: none !important; flex: 0 0 auto; }
#modal-admin .admin-toolbar-extra { display: none !important; }
#modal-admin .admin-mas { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text); padding: 0; cursor: pointer; }
#modal-admin .admin-mas-menu { position: absolute; right: 0; top: 50px; z-index: 40; min-width: 220px; padding: 6px; border-radius: 14px;
background: #1f4439; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 36px rgba(0,0,0,0.5); flex-direction: column; }
#modal-admin .admin-mas-menu.abierto { display: flex; }
#modal-admin .admin-mas-menu button { appearance: none; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; text-align: left; padding: 12px 12px; border-radius: 10px; cursor: pointer; }
#modal-admin .admin-mas-menu button:active { background: rgba(255,255,255,0.06); }
/* Activos · Archivados · Papelera: segmentado fino */
#modal-admin .view-mode-toggle { padding: 3px !important; border-radius: 12px !important; margin-bottom: 10px !important; }
#modal-admin .view-mode-btn { min-height: 34px !important; height: 34px !important; font-size: 12.5px !important; letter-spacing: 0.3px !important; border-radius: 9px !important; }
/* filas de la lista */
#modal-admin .admin-list { border-radius: 14px !important; }
#modal-admin .admin-item { min-height: 54px !important; padding: 8px 6px 8px 14px !important; }
#modal-admin .admin-item-name { font-size: 15px !important; line-height: 1.25 !important; }
#modal-admin .admin-item-sub, #modal-admin .admin-item-meta { font-size: 12px !important; margin-top: 1px !important; }
#modal-admin .admin-icon-btn { width: 38px !important; height: 38px !important; }
#modal-admin .admin-item-actions { gap: 0 !important; }
}
/* ---- v136b · jerarquía de color en el móvil (Robert: «estos botones parecen demasiado iguales») ----
Dorado lleno = SOLO la acción principal (Guardar, + Nuevo, +). Un selector (Efectivo / Crédito,
Activos / Archivados, Ventas / Incidencias) marca la opción elegida en claro con texto dorado; los
filtros (Ajustes, Informes) con borde dorado suave. Y un Informes compacto. */
@media (max-width: 600px) {
.method-toggle { padding: 3px !important; border-radius: 12px !important; background: rgba(0,0,0,0.28) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.method-option { min-height: 40px; padding: 0 10px !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; text-transform: none !important; color: var(--text-muted) !important; }
.method-option.active { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.45), 0 1px 3px rgba(0,0,0,0.3) !important; }
.method-option.active::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.view-mode-btn.active, .report-mode-btn.active { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.40) !important; }
#modal-admin.pagina .admin-tab.active, #modal-reports .report-period-btn.active { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
/* Informes: Ventas · Incidencias como selector fino */
#modal-reports .report-mode { padding: 3px !important; border-radius: 12px !important; margin-bottom: 10px !important; }
#modal-reports .report-mode-btn { min-height: 36px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 9px !important; }
/* periodos: un carril de filtros que se desliza (el de dos pasos fuera) */
#modal-reports .rp-mobile, #modal-reports .rp-compact { display: none !important; }
#modal-reports .report-period-picker {
display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
gap: 8px !important; margin: 0 -14px 6px !important; padding: 8px 14px !important; border: 0 !important; border-radius: 0 !important;
background: var(--bg-deep) !important; box-shadow: 0 8px 12px -10px rgba(0,0,0,0.7) !important; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
#modal-reports .report-period-picker::-webkit-scrollbar { display: none; }
#modal-reports .report-period-picker > .report-period-btn {
display: inline-flex !important; align-items: center; flex: 0 0 auto !important; height: 34px !important; min-height: 0 !important; padding: 0 14px !important;
border-radius: 17px !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; white-space: nowrap;
}
#modal-reports .report-period-picker.is-compact > .report-period-btn { display: inline-flex !important; }
#modal-reports .report-custom-range { flex: 0 0 auto; }
/* el periodo, una línea y no una tarjeta */
#modal-reports .report-periodo { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 2px 10px !important; margin: 0 !important; }
#modal-reports .report-periodo .report-section-title { display: none !important; }
#modal-reports .report-periodo > div { font-size: 13px !important; color: var(--text-muted) !important; margin-top: 0 !important; }
#modal-reports .report-periodo strong { color: var(--text); font-weight: 600; }
/* cifras: ventas en grande y debajo tres datos en fila */
#modal-reports .report-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 12px !important; }
#modal-reports .report-card { padding: 10px 10px 9px !important; border-radius: 12px !important; min-width: 0; }
#modal-reports .report-card:first-child { grid-column: 1 / -1; padding: 14px 16px !important; }
#modal-reports .report-card:first-child .report-card-value { font-size: 28px !important; }
#modal-reports .report-card:not(:first-child) .report-card-value { font-size: 15px !important; white-space: nowrap; letter-spacing: -0.2px; }
#modal-reports .report-card:not(:first-child) .report-card-label { font-size: 9.5px !important; letter-spacing: 0.6px !important; line-height: 1.25 !important; min-height: 2.5em; white-space: normal; }
#modal-reports .report-card:not(:first-child) .report-card-sub { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-reports .report-section-title { font-size: 11px !important; letter-spacing: 1.2px !important; }
}
/* ---- v136c · Incidencias en el móvil: cifras en una franja, estado como selector, tipos en carril (solo los que tienen algo) ---- */
.inc-chip.vacio { }
@media (max-width: 600px) {
#modal-reports .inc-cabecera { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 12px !important; }
#modal-reports .inc-cabecera > .report-section-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text-muted) !important; border: 0 !important; padding: 2px 2px 10px !important; margin: 0 !important; }
#modal-reports .inc-kpis { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 0 12px !important;
background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; }
#modal-reports .inc-kpis .inc-kpi { grid-column: auto !important; padding: 10px 4px 9px !important; border: 0 !important; border-left: 1px solid rgba(255,255,255,0.07) !important; border-radius: 0 !important; background: none !important; text-align: center; min-width: 0; }
#modal-reports .inc-kpis .inc-kpi:first-child { border-left: 0 !important; }
#modal-reports .inc-kpi span { display: block; font-size: 9px !important; letter-spacing: 0.4px !important; line-height: 1.2 !important; min-height: 2.4em; text-transform: uppercase; color: var(--text-muted); }
#modal-reports .inc-kpi b { display: block; font-size: 20px !important; line-height: 1.1 !important; margin-top: 4px; }
#modal-reports .inc-kpi small { display: none !important; }
#modal-reports .inc-kpi.is-warn b { color: var(--accent); }
#modal-reports .inc-kpi.is-bad b { color: #e8907c; }
/* Todas · Abiertas · Graves · Resueltas */
#modal-reports .inc-estado { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; padding: 3px !important; margin: 0 0 10px !important;
background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
#modal-reports .inc-estado .inc-chip { height: 34px !important; min-height: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 9px !important; background: none !important;
font-size: 13.5px !important; font-weight: 600 !important; color: var(--text-muted) !important; box-shadow: none !important; justify-content: center; }
#modal-reports .inc-estado .inc-chip.on { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.40) !important; }
/* tipos: un carril que se desliza; los que están a 0 no salen */
#modal-reports .inc-tipos { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
gap: 8px !important; margin: 0 -14px 4px !important; padding: 2px 14px 4px !important; }
#modal-reports .inc-tipos::-webkit-scrollbar { display: none; }
#modal-reports .inc-tipos .inc-chip { flex: 0 0 auto !important; height: 32px !important; min-height: 0 !important; padding: 0 12px !important; border-radius: 16px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; }
#modal-reports .inc-tipos .inc-chip.on { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
#modal-reports .inc-tipos .inc-chip.vacio { display: none !important; }
#modal-reports .inc-tipos .inc-chip b { margin-left: 4px; color: var(--text); }
#modal-reports .inc-vacio { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#modal-reports .inc-vacio .report-empty { text-align: center; color: var(--text-muted); }
}
/* ---- v136d · repaso de toda la app en el móvil (Robert: «mira la app entera donde tiene problemas así») ---- */
@media (max-width: 600px) {
/* + de la barra: las dos opciones salen centradas encima del botón (antes pegadas a la derecha) */
#sheet-nueva .sheet-nueva-panel {
left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(330px, calc(100% - 32px)) !important; max-width: none !important;
bottom: calc(max(4px, calc(env(safe-area-inset-bottom) - 14px)) + 78px) !important; align-items: stretch !important; gap: 8px !important;
}
#sheet-nueva .sheet-nueva-item { flex-direction: row !important; gap: 12px !important; padding: 10px 14px 10px 10px !important; border-radius: 16px !important;
background: var(--hoja-bg) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.5) !important; text-align: left; }
#sheet-nueva .sheet-nueva-ico { width: 44px !important; height: 44px !important; margin: 0 !important; box-shadow: none !important; border-radius: 12px !important; flex: 0 0 auto; }
#sheet-nueva .sheet-nueva-txt { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#sheet-nueva .sheet-nueva-txt b { font-size: 15.5px !important; }
#sheet-nueva .sheet-nueva-txt small { font-size: 12px !important; color: var(--text-muted); }
/* acción principal = dorado lleno; lo demás en dorado suave */
.pend-ok, .parte-strip-add { background: rgba(212,175,55,0.12) !important; color: var(--accent) !important; border: 1px solid rgba(212,175,55,0.55) !important; box-shadow: none !important; }
.pend-ok { height: 34px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 13px !important; letter-spacing: 0.3px !important; text-transform: none !important; font-weight: 700 !important; }
.parte-strip-add { height: 32px !important; padding: 0 12px !important; font-size: 13px !important; }
/* Compra directa: el tipo como chips de texto (fuera los emojis) */
.subtype-picker { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; grid-template-columns: none !important; }
.subtype-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; height: 36px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 18px !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; box-shadow: none !important; }
.subtype-btn-icon { display: none !important; }
.subtype-btn-label { font-size: 13.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
.subtype-btn.active { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
/* Partes (caja, informes y enlace del personal): menos mayúsculas y botones finos */
.parte-item { padding: 10px 12px !important; border-radius: 12px !important; }
.parte-item-head { align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; }
.parte-item-tipo { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--accent) !important; }
.parte-item-txt { font-size: 14.5px !important; line-height: 1.4 !important; }
.parte-item-meta, .parte-item-nota { font-size: 12px !important; }
.parte-btn, .parte-resolver-btn, .parte-borrar-btn, .parte-item-head .btn-outline-gold {
height: 30px !important; min-height: 0 !important; padding: 0 12px !important; border-radius: 9px !important; font-size: 12.5px !important;
letter-spacing: 0.2px !important; text-transform: none !important; font-weight: 700 !important; margin-left: auto;
}
.parte-row-txt b { font-size: 15px !important; }
.parte-add-btn { height: 42px !important; min-height: 0 !important; border-radius: 12px !important; text-transform: none !important; letter-spacing: 0.2px !important; font-size: 14px !important; border-style: dashed !important; }
#pm-ordenar, #pt-ordenar, .parte-btn.btn { background: rgba(212,175,55,0.12) !important; color: var(--accent) !important; border: 1px solid rgba(212,175,55,0.55) !important;
height: 36px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 13.5px !important; text-transform: none !important; letter-spacing: 0.2px !important; }
.parte-mic { height: 36px !important; min-height: 0 !important; border-radius: 10px !important; text-transform: none !important; letter-spacing: 0.2px !important; font-size: 13.5px !important; }
.parte-grave-btn { height: 30px !important; min-height: 0 !important; padding: 0 12px !important; border-radius: 15px !important; font-size: 12.5px !important; }
.parte-foot .btn, .sub-acts .btn { text-transform: none !important; letter-spacing: 0.2px !important; font-size: 14.5px !important; height: 44px !important; min-height: 0 !important; border-radius: 12px !important; font-weight: 700 !important; }
/* caja cerrada: botones de acción más bajos */
#cierre-actions-top .btn { min-height: 40px !important; height: 40px !important; font-size: 13.5px !important; border-radius: 11px !important; text-transform: none !important; letter-spacing: 0.2px !important; }
/* enlace del personal: mismas formas */
.sub-acts { gap: 10px !important; }
.sub-acts-r { gap: 10px !important; }
.sub-acts .btn-danger { background: none !important; border: 0 !important; color: #e8907c !important; padding: 0 8px !important; }
}
/* ---- v136e · Informes «Personalizado» en el móvil: Desde / Hasta debajo del carril, mitad y mitad; calendario centrado ---- */
@media (max-width: 600px) {
#modal-reports .report-custom-range { display: none !important; }
#modal-reports .report-custom-range.active { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 4px 0 12px !important; width: 100%; }
#modal-reports .report-custom-range .rp-date { flex: 1 1 0 !important; min-width: 0 !important; display: flex; flex-direction: column; gap: 6px; }
#modal-reports .report-custom-range .form-input, #modal-reports .report-custom-range input { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 44px !important; font-size: 16px !important; border-radius: 12px !important; box-sizing: border-box; }
.flatpickr-calendar.open { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: calc(100vw - 24px); }
.flatpickr-calendar.open::before, .flatpickr-calendar.open::after { display: none !important; }
}
/* ============================================================================
v137 · iPad y pantallas grandes (16-oct-2026)
Robert: «uso mucho el iPad 13 Pro M5, déjalo preparado bien para iPad».
El iPad 13 mide 1032 px en vertical y 1376 en horizontal: usaba el diseño de
PC con letra de ordenador y botones de 30 px. Aquí, para todo lo que pasa de
600 px, el mismo lenguaje del móvil (v136): dorado lleno solo para lo
principal, selectores en claro, filtros en chips, X fina, pies fijos con
botones de 44 px, campos de 16 px (el iPad amplía la pantalla con menos) y
páginas planas. Con dedo (pointer: coarse) todo lo que se toca ≥ 40 px.
============================================================================ */
:root { --hoja-bg: #183a31; --hoja-borde: rgba(255,255,255,0.08); }
@media (min-width: 601px) {
/* ---------- Cabecera: una sola fila desde 1000 px (iPad 13 en vertical incluido) ---------- */
.app-header { border-radius: 16px; }
.app-tab { font-size: 13.5px; letter-spacing: 0.4px; }
.app-tab.active { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.45); }
/* ---------- Ventanas centradas, finas ---------- */
.modal-overlay:not(.pagina):not(#modal-nora) { padding: 24px !important; }
.modal-overlay:not(.pagina):not(#modal-nora) > .modal {
background: var(--hoja-bg) !important; border: 1px solid var(--hoja-borde) !important; border-radius: 20px !important;
padding: 0 24px 20px !important; max-height: min(88dvh, 920px) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important;
}
.modal-overlay:not(.pagina):not(#modal-nora) .modal-header {
position: sticky !important; top: 0 !important; z-index: 6; height: auto !important; min-height: 0 !important;
margin: 0 -24px 16px !important; padding: 18px 24px 14px !important; background: var(--hoja-bg) !important;
border-radius: 20px 20px 0 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--hoja-borde) !important; align-items: center !important;
}
.modal-title { font-size: 21px !important; line-height: 1.2 !important; }
.modal-close, .modal-header .modal-close {
width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,0.09) !important; color: var(--text-muted) !important;
font-size: 13px !important; line-height: 32px !important; box-shadow: none !important; flex: 0 0 auto;
}
.modal-overlay:not(.pagina):not(#modal-nora) .form-actions,
.modal-overlay:not(.pagina):not(#modal-nora) .tx-d-footer,
#modal-parte .parte-foot {
position: sticky !important; bottom: -20px !important; z-index: 6;
margin: 18px -24px -20px !important; padding: 12px 24px 16px !important;
background: var(--hoja-bg) !important; border-top: 1px solid var(--hoja-borde) !important;
display: flex !important; gap: 10px !important; justify-content: flex-end !important; flex-wrap: wrap;
}
.modal .form-actions .btn, .modal .tx-d-footer > button, .modal .parte-foot > .btn {
min-height: 44px !important; height: 44px !important; padding: 0 22px !important; border-radius: 12px !important; min-width: 130px;
font-size: 15px !important; letter-spacing: 0.2px !important; text-transform: none !important; font-weight: 700 !important; flex: 0 0 auto !important; width: auto !important;
}
.modal .tx-d-footer > .btn-text-danger { border: 1px solid rgba(224,106,80,0.40) !important; background: none !important; color: #e8907c !important; margin-right: auto; }
.modal .tx-d-footer > .btn-outline-gold { border: 1px solid rgba(212,175,55,0.55) !important; background: rgba(212,175,55,0.08) !important; color: var(--accent) !important; }
.modal .form-actions-split { justify-content: space-between !important; }
.modal .form-actions-split .form-actions-left { display: flex; gap: 4px; }
.modal .form-actions-split .form-actions-left.vacio { display: none; }
.modal .form-actions-split .form-actions-right { display: flex; gap: 10px; margin-left: auto; }
.modal .form-actions-split .form-actions-left .btn {
min-width: 0 !important; padding: 0 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important;
}
.modal .form-actions-split .form-actions-left .btn-danger { color: #e8907c !important; }
.modal .form-actions-split .form-actions-left .btn-secondary { color: var(--accent) !important; }
/* campos: 16 px (si no, el iPad amplía la pantalla al tocarlos) */
.modal input[type="text"], .modal input[type="email"], .modal input[type="tel"], .modal input[type="number"], .modal input[type="password"],
.modal input[type="time"], .modal input[type="date"], .modal input:not([type]), .modal select, .modal .asel-btn, .admin-search, .form-input {
min-height: 46px !important; border-radius: 12px !important; font-size: 16px !important;
}
.modal textarea, textarea.form-input { border-radius: 12px !important; font-size: 16px !important; }
.modal label, .modal .form-label { font-size: 11.5px !important; letter-spacing: 1px !important; margin-bottom: 7px !important; }
.btn-scan-ai { min-height: 48px !important; border-radius: 12px !important; }
/* ---------- Jerarquía de color (igual que el móvil) ---------- */
.method-toggle { padding: 3px !important; border-radius: 12px !important; background: rgba(0,0,0,0.28) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.method-option { min-height: 42px; padding: 0 12px !important; border-radius: 9px !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; text-transform: none !important; color: var(--text-muted) !important; }
.method-option.active { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.45), 0 1px 3px rgba(0,0,0,0.3) !important; }
.method-option.active::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.view-mode-btn.active, .report-mode-btn.active { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.40) !important; }
.pend-ok, .parte-strip-add, #pm-ordenar, #pt-ordenar, .parte-btn.btn { background: rgba(212,175,55,0.12) !important; color: var(--accent) !important; border: 1px solid rgba(212,175,55,0.55) !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0.2px !important; }
.pend-ok { height: 36px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 700 !important; }
.subtype-picker { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; grid-template-columns: none !important; }
.subtype-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; height: 38px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 19px !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; box-shadow: none !important; }
.subtype-btn-icon { display: none !important; }
.subtype-btn-label { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
.subtype-btn.active { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
/* partes */
.parte-item-tipo { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: var(--accent) !important; }
.parte-item-txt { font-size: 15px !important; line-height: 1.45 !important; }
.parte-btn, .parte-resolver-btn, .parte-borrar-btn { height: 32px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 9px !important; font-size: 13px !important; letter-spacing: 0.2px !important; text-transform: none !important; font-weight: 700 !important; }
.parte-add-btn { height: 44px !important; min-height: 0 !important; border-radius: 12px !important; text-transform: none !important; letter-spacing: 0.2px !important; font-size: 14.5px !important; border-style: dashed !important; }
#pm-ordenar, .parte-mic { height: 38px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0.2px !important; }
/* ---------- Páginas: planas, título grande ---------- */
#modal-history.pagina .modal, #modal-reports.pagina .modal, #modal-admin.pagina .modal {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 2px 0 !important; border-radius: 0 !important;
}
#modal-history.pagina .modal-header, #modal-reports.pagina .modal-header, #modal-admin.pagina .modal-header { border-bottom: 0 !important; margin-bottom: 12px !important; padding: 0 !important; }
.pagina .modal-title { font-size: 30px !important; }
/* Historial: tarjetas compactas en dos columnas */
#modal-history.pagina .modal > p { font-size: 14px !important; color: var(--text-muted); margin-bottom: 14px !important; }
#modal-history .history-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px !important; }
#modal-history .history-item { margin: 0 !important; padding: 14px 16px !important; border-radius: 16px !important; }
#modal-history .history-item-date { font-size: 16px !important; }
#modal-history .history-item-meta { font-size: 13px !important; }
#modal-history .history-stats { display: flex !important; gap: 0 !important; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); background: none !important; }
#modal-history .history-stat { flex: 1 1 0; background: none !important; border: 0 !important; padding: 0 !important; }
#modal-history .history-stat-k { font-size: 10.5px !important; letter-spacing: 0.8px !important; }
#modal-history .history-stat-v { font-size: 16px !important; }
/* Ajustes: filtros en chips (caben todos), buscador + Nuevo + ⋯ */
#modal-admin.pagina .modal { display: flex !important; flex-direction: column; }
#modal-admin.pagina .app-version-admin { order: 99; text-align: center; margin: 22px 0 4px; }
#modal-admin.pagina .admin-tabs { display: flex !important; flex-wrap: wrap !important; grid-template-columns: none !important; gap: 8px !important; padding: 0 !important; margin: 0 0 16px !important;
border: 0 !important; background: none !important; box-shadow: none !important; position: static !important; height: auto !important; }
#modal-admin.pagina .admin-tab { flex: 0 0 auto !important; height: 38px !important; min-height: 0 !important; padding: 0 18px !important; border-radius: 19px !important;
font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; box-shadow: none !important; }
#modal-admin.pagina .admin-tab.active { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
#modal-admin .admin-section { position: relative; }
#modal-admin .admin-toolbar { gap: 10px !important; margin-bottom: 12px !important; align-items: center; }
#modal-admin .admin-search { height: 46px !important; }
#modal-admin .admin-toolbar .btn { height: 46px !important; min-height: 0 !important; padding: 0 20px !important; border-radius: 12px !important; font-size: 15px !important; letter-spacing: 0.2px !important; text-transform: none !important; flex: 0 0 auto; }
#modal-admin .admin-toolbar-extra { display: none !important; }
#modal-admin .admin-mas { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text); padding: 0; cursor: pointer; }
#modal-admin .admin-mas-menu { position: absolute; right: 0; top: 54px; z-index: 40; min-width: 240px; padding: 6px; border-radius: 14px;
background: #1f4439; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 36px rgba(0,0,0,0.5); flex-direction: column; }
#modal-admin .admin-mas-menu.abierto { display: flex; }
#modal-admin .admin-mas-menu button { appearance: none; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer; }
#modal-admin .admin-mas-menu button:hover, #modal-admin .admin-mas-menu button:active { background: rgba(255,255,255,0.06); }
#modal-admin .view-mode-toggle { padding: 3px !important; border-radius: 12px !important; margin-bottom: 12px !important; max-width: 520px; }
#modal-admin .view-mode-btn { min-height: 38px !important; font-size: 13.5px !important; border-radius: 9px !important; }
#modal-admin .admin-list { border-radius: 16px !important; }
#modal-admin .admin-item { min-height: 58px !important; padding: 9px 8px 9px 16px !important; }
#modal-admin .admin-item-name { font-size: 15.5px !important; }
#modal-admin .admin-item-sub, #modal-admin .admin-item-meta { font-size: 13px !important; }
/* Informes */
#modal-reports .report-mode { padding: 3px !important; border-radius: 12px !important; margin-bottom: 12px !important; display: inline-flex !important; }
#modal-reports .report-mode-btn { min-height: 38px !important; padding: 0 20px !important; font-size: 14.5px !important; font-weight: 600 !important; border-radius: 9px !important; }
#modal-reports .rp-mobile, #modal-reports .rp-compact { display: none !important; }
#modal-reports .report-period-picker { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 0 12px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#modal-reports .report-period-picker > .report-period-btn {
display: inline-flex !important; align-items: center; flex: 0 0 auto !important; height: 38px !important; min-height: 0 !important; padding: 0 16px !important;
border-radius: 19px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; white-space: nowrap;
}
#modal-reports .report-period-picker > .report-period-btn.active { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
#modal-reports .report-custom-range.active { display: flex !important; gap: 12px !important; flex-basis: 100%; margin-top: 4px; }
#modal-reports .report-custom-range .rp-date { flex: 0 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#modal-reports .report-custom-range .form-input, #modal-reports .report-custom-range input { width: 100% !important; max-width: none !important; height: 46px !important; }
#modal-reports .report-periodo { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 2px 12px !important; margin: 0 !important; }
#modal-reports .report-periodo .report-section-title { display: none !important; }
#modal-reports .report-periodo > div { font-size: 14px !important; color: var(--text-muted) !important; margin-top: 0 !important; }
#modal-reports .report-periodo strong { color: var(--text); font-weight: 600; }
#modal-reports .report-card { padding: 16px 18px !important; border-radius: 16px !important; }
#modal-reports .report-card-value { font-size: 24px !important; }
#modal-reports .report-card:first-child .report-card-value { font-size: 28px !important; }
#modal-reports .report-card-label { font-size: 11px !important; }
#modal-reports .report-card-sub { font-size: 12.5px !important; }
#modal-reports .report-section { border-radius: 16px !important; }
/* Incidencias */
#modal-reports .inc-cabecera { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 14px !important; }
#modal-reports .inc-cabecera > .report-section-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--text-muted) !important; border: 0 !important; padding: 2px 2px 12px !important; margin: 0 !important; }
#modal-reports .inc-kpis { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 0 14px !important;
background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; }
#modal-reports .inc-kpis .inc-kpi { grid-column: auto !important; padding: 14px 8px 12px !important; border: 0 !important; border-left: 1px solid rgba(255,255,255,0.07) !important; border-radius: 0 !important; background: none !important; text-align: center; }
#modal-reports .inc-kpis .inc-kpi:first-child { border-left: 0 !important; }
#modal-reports .inc-kpi span { display: block; font-size: 10.5px !important; letter-spacing: 0.6px !important; text-transform: uppercase; color: var(--text-muted); }
#modal-reports .inc-kpi b { display: block; font-size: 26px !important; line-height: 1.1 !important; margin-top: 6px; }
#modal-reports .inc-kpi small { font-size: 11.5px !important; }
#modal-reports .inc-kpi.is-warn b { color: var(--accent); }
#modal-reports .inc-kpi.is-bad b { color: #e8907c; }
#modal-reports .inc-estado { display: inline-grid !important; grid-template-columns: repeat(4, auto); gap: 0 !important; padding: 3px !important; margin: 0 0 12px !important;
background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
#modal-reports .inc-estado .inc-chip { height: 36px !important; padding: 0 18px !important; border: 0 !important; border-radius: 9px !important; background: none !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text-muted) !important; box-shadow: none !important; }
#modal-reports .inc-estado .inc-chip.on { background: rgba(245,232,211,0.12) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.40) !important; }
#modal-reports .inc-tipos { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 6px !important; }
#modal-reports .inc-tipos .inc-chip { height: 36px !important; padding: 0 14px !important; border-radius: 18px !important; font-size: 13.5px !important; font-weight: 600 !important;
border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.03) !important; color: var(--text-muted) !important; }
#modal-reports .inc-tipos .inc-chip.on { background: rgba(212,175,55,0.14) !important; border-color: rgba(212,175,55,0.75) !important; color: var(--accent) !important; }
#modal-reports .inc-tipos .inc-chip.vacio { display: none !important; }
#modal-reports .inc-tipos .inc-chip b { margin-left: 4px; color: var(--text); }
/* ---------- Caja ---------- */
.tx-item { min-height: 52px !important; }
.tx-time-leading.otro-dia b { display: block; font-size: 10.5px; font-weight: 700; color: #e0a37a; }
.tx-late-wrap { display: none !important; }
#cierre-actions-top .btn { min-height: 42px !important; font-size: 14px !important; border-radius: 11px !important; text-transform: none !important; letter-spacing: 0.2px !important; }
.action-buttons .btn { text-transform: none !important; letter-spacing: 0.3px !important; font-size: 15px !important; }
}
/* Cabecera en una fila cuando cabe (iPad 13 vertical = 1032 px) */
@media (min-width: 1000px) {
.app-header { flex-wrap: nowrap !important; align-items: center !important; padding: 12px 16px 12px 20px !important; }
.app-tabs { order: 1; flex: 0 0 auto !important; min-width: 0 !important; margin-left: 24px; }
.app-tab { flex: 0 0 auto !important; padding: 0 20px !important; min-height: 40px; }
.app-header-user { order: 2; margin-left: auto; }
.app-shell { max-width: 1080px; }
}
/* ---------- Con dedo (iPad, tablets): todo lo que se toca ≥ 40 px ---------- */
@media (min-width: 601px) and (pointer: coarse) {
.app-header .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.app-tab { min-height: 44px !important; font-size: 14px !important; }
.tx-item { min-height: 56px !important; }
.tx-title { font-size: 15.5px !important; }
.tx-amount { font-size: 16.5px !important; }
.tx-menu-btn { width: 42px !important; height: 42px !important; }
#modal-admin .admin-icon-btn { width: 42px !important; height: 42px !important; }
#modal-admin .admin-item { min-height: 62px !important; }
.lectura-x-row { min-height: 64px; }
.history-item { cursor: pointer; }
.panel-title, .tx-panel-title { font-size: 20px !important; }
.pend-ok { height: 40px !important; }
.parte-btn, .parte-resolver-btn, .parte-borrar-btn { height: 36px !important; }
.modal-close, .modal-header .modal-close { width: 36px !important; height: 36px !important; line-height: 36px !important; }
}
/* v138 · Informes: aviso de fallo con Reintentar */
.rep-fallo { text-align: center; color: var(--text-muted); padding: 24px 8px; line-height: 1.6; font-size: 15px; }
.rep-fallo .btn-outline-gold { margin-top: 12px; height: 42px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-weight: 700; border: 1px solid rgba(212,175,55,0.6); background: rgba(212,175,55,0.10); color: var(--accent); cursor: pointer; }
#modal-reports .report-empty:has(.rep-fallo) { display: block !important; }
/* v139 · Incidencias: las cifras son botones (Partes abre la lista de partes), mensaje cuando no hay nada */
#modal-reports .inc-kpis .inc-kpi { cursor: pointer; font: inherit; color: inherit; appearance: none; -webkit-tap-highlight-color: transparent; }
#modal-reports .inc-kpis .inc-kpi.on { background: rgba(212,175,55,0.12) !important; box-shadow: inset 0 -3px 0 var(--accent) !important; }
#modal-reports .inc-kpis .inc-kpi.on span { color: var(--accent) !important; }
#modal-reports .inc-tipos.hidden { display: none !important; }
.inc-nada { text-align: center; color: var(--text-muted); padding: 28px 12px; font-size: 15px; line-height: 1.6; }
.inc-link { appearance: none; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
.inc-parte { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); margin-top: 10px; }
.inc-parte-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inc-parte-head b { font-size: 15px; }
.inc-parte-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.inc-parte-item { font-size: 14px; line-height: 1.4; margin-top: 8px; padding-left: 10px; border-left: 2px solid rgba(212,175,55,0.5); }
.inc-parte-item.is-grave { border-left-color: var(--error); }
.inc-parte-item span { display: block; font-size: 12px; font-weight: 700; color: var(--accent); }
.inc-parte .parte-bien { margin-top: 8px; font-size: 13.5px; }
.sub-estado.warn { color: var(--accent); border-color: rgba(212,175,55,0.5); }
/* ============================================================================
v140 · Nora, chat profesional (16-oct-2026)
============================================================================ */
#modal-nora .nora-modal { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; background: #13302a !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px !important; }
#modal-nora .nora-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px !important; margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.07); background: #163630; flex: 0 0 auto; position: static; }
#modal-nora .nora-avatar, #modal-nora .nm-av, #modal-nora .nora-vacio-av { display: grid; place-items: center; border-radius: 50%; color: #1a1306; background: linear-gradient(135deg, #f3d77a, #c9a23c); box-shadow: 0 2px 8px rgba(0,0,0,0.3); flex: 0 0 auto; }
#modal-nora .nora-avatar { width: 38px; height: 38px; font-size: 0; }
#modal-nora .nora-avatar svg { width: 20px; height: 20px; }
#modal-nora .nora-title { font-family: 'Playfair Display', serif; font-size: 18px !important; font-weight: 700; line-height: 1.1; }
#modal-nora .nora-lead { display: flex !important; align-items: center; gap: 6px; font-size: 12.5px !important; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-nora .nora-dot { width: 7px; height: 7px; border-radius: 50%; background: #5bd48f; box-shadow: 0 0 0 3px rgba(91,212,143,0.18); flex: 0 0 auto; }
#modal-nora .nora-head-txt { flex: 1 1 auto; min-width: 0; }
#modal-nora .nora-icon-btn { appearance: none; width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
#modal-nora .nora-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
#modal-nora .modal-close { position: relative !important; top: auto !important; right: auto !important; transform: none !important; margin: 0 !important; width: 34px !important; height: 34px !important; border: 0 !important; background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; border-radius: 50% !important; font-size: 13px !important; line-height: 34px !important; padding: 0 !important; box-shadow: none !important; }
/* mensajes */
#modal-nora .nora-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 !important; padding: 18px 16px 8px !important; display: flex; flex-direction: column; gap: 14px; background: none !important; border: 0 !important; border-radius: 0 !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#modal-nora .nm { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
#modal-nora .nm-yo { justify-content: flex-end; }
#modal-nora .nm-cont { margin-bottom: -10px; }
#modal-nora .nm-av { width: 28px; height: 28px; font-size: 13px; font-weight: 800; margin-bottom: 20px; }
#modal-nora .nm-av svg { width: 15px; height: 15px; }
#modal-nora .nm-col { display: flex; flex-direction: column; min-width: 0; max-width: min(78%, 620px); }
#modal-nora .nm-yo .nm-col { align-items: flex-end; }
#modal-nora .nm-burbuja { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#modal-nora .nm-ia .nm-burbuja { background: #1f4439; color: var(--text); border-bottom-left-radius: 6px; }
#modal-nora .nm-yo .nm-burbuja { background: #c9aa41; color: #14251f; border-bottom-right-radius: 6px; font-weight: 500; }
#modal-nora .nm-burbuja p { margin: 0 0 8px; } #modal-nora .nm-burbuja p:last-child { margin-bottom: 0; }
#modal-nora .nm-burbuja ul, #modal-nora .nm-burbuja ol { margin: 4px 0 8px; padding-left: 20px; }
#modal-nora .nm-burbuja li { margin: 3px 0; }
#modal-nora .nm-burbuja strong { color: #fff; font-weight: 700; }
#modal-nora .nm-yo .nm-burbuja strong { color: inherit; }
#modal-nora .nm-meta { font-size: 11.5px; color: var(--text-subtle); margin-top: 4px; padding: 0 6px; display: flex; align-items: center; gap: 4px; }
#modal-nora .nm-copiar { appearance: none; background: none; border: 0; color: var(--text-subtle); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 2px; text-decoration: underline; text-underline-offset: 2px; }
#modal-nora .nm-copiar:hover { color: var(--text); }
#modal-nora .nm-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
#modal-nora .nm-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: noraPunto 1.2s infinite ease-in-out; }
#modal-nora .nm-dots i:nth-child(2) { animation-delay: .15s; } #modal-nora .nm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes noraPunto { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
#modal-nora .nm-mirando { display: none; margin-left: 10px; font-size: 13px; color: var(--text-muted); }
#modal-nora .nm-escribiendo.lento .nm-mirando { display: inline; }
#modal-nora .nm-error .nm-av { background: rgba(224,106,80,0.25); color: #f0a18f; box-shadow: none; }
#modal-nora .nm-error .nm-burbuja { background: rgba(224,106,80,0.12); border: 1px solid rgba(224,106,80,0.3); }
#modal-nora .nm-reintentar { margin-top: 8px; appearance: none; border: 1px solid rgba(212,175,55,0.55); background: rgba(212,175,55,0.12); color: var(--accent); font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 10px; cursor: pointer; }
/* bienvenida */
#modal-nora .nora-vacio { margin: auto 0; padding: 12px 4px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; }
#modal-nora .nora-vacio-av { width: 56px; height: 56px; margin-bottom: 12px; }
#modal-nora .nora-vacio-av svg { width: 28px; height: 28px; }
#modal-nora .nora-vacio-t { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; }
#modal-nora .nora-vacio-s { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; max-width: 440px; margin-top: 6px; }
#modal-nora .nora-sug { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; max-width: 560px; margin-top: 20px; }
#modal-nora .nora-sug-btn { appearance: none; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
#modal-nora .nora-sug-btn b { font-size: 14.5px; font-weight: 600; }
#modal-nora .nora-sug-btn small { font-size: 12.5px; color: var(--text-muted); }
#modal-nora .nora-sug-btn:hover, #modal-nora .nora-sug-btn:active { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.07); }
@media (min-width: 601px) { #modal-nora .nora-sug { grid-template-columns: 1fr 1fr; } }
/* escribir */
#modal-nora .nora-form { display: block !important; margin: 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; border-top: 1px solid rgba(255,255,255,0.07); background: #163630; flex: 0 0 auto; }
#modal-nora .nora-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 24px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.10); transition: border-color .15s, box-shadow .15s; }
#modal-nora .nora-composer:focus-within { border-color: rgba(212,175,55,0.6); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
#modal-nora #nora-input { flex: 1 1 auto; min-width: 0; resize: none; border: 0 !important; outline: none; background: none !important; box-shadow: none !important; color: var(--text); font: inherit; font-size: 16px !important; line-height: 1.4; padding: 8px 0 !important; max-height: 140px; min-height: 0 !important; height: auto; border-radius: 0 !important; }
#modal-nora .nora-send-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: var(--accent) !important; color: #14251f !important; cursor: pointer; transition: opacity .15s, transform .15s; box-shadow: none !important; }
#modal-nora .nora-send-btn svg { width: 18px !important; height: 18px !important; }
#modal-nora .nora-send-btn:disabled { opacity: .35; cursor: default; transform: none; }
#modal-nora .nora-pie { font-size: 11.5px; color: var(--text-subtle); text-align: center; margin-top: 7px; }
/* tamaños */
@media (min-width: 601px) {
#modal-nora.modal-overlay { padding: 24px !important; }
#modal-nora .nora-modal { width: min(780px, 94vw) !important; max-width: none !important; height: min(86dvh, 900px) !important; max-height: none !important; }
}
@media (max-width: 600px) {
#modal-nora.modal-overlay { padding: 0 !important; align-items: stretch !important; }
#modal-nora .nora-modal { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; border-radius: 0 !important; border: 0 !important; }
#modal-nora .nora-head { padding-top: calc(10px + env(safe-area-inset-top)) !important; }
#modal-nora .nm-col { max-width: 82%; }
}
/* v140b · historial de conversaciones de Nora */
#modal-nora .nora-modal { position: relative; }
#modal-nora .nora-hist { position: absolute; inset: 62px 0 0 0; z-index: 8; background: #13302a; display: flex; flex-direction: column; animation: noraHist .18s ease; }
@media (max-width: 600px) { #modal-nora .nora-hist { top: calc(62px + env(safe-area-inset-top)); } }
#modal-nora .nora-hist.hidden { display: none; }
@keyframes noraHist { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#modal-nora .nora-hist-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
#modal-nora .nora-hist-head b { flex: 1; font-size: 16px; }
#modal-nora .nora-hist-nueva { appearance: none; border: 1px solid rgba(212,175,55,0.55); background: rgba(212,175,55,0.12); color: var(--accent); font: inherit; font-weight: 700; font-size: 13.5px; height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer; }
#modal-nora .nora-hist-list { flex: 1; overflow-y: auto; padding: 8px; }
#modal-nora .nora-hist-item { display: flex; align-items: center; gap: 4px; border-radius: 12px; }
#modal-nora .nora-hist-item.on { background: rgba(212,175,55,0.10); }
#modal-nora .nora-hist-abrir { flex: 1; min-width: 0; appearance: none; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 11px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border-radius: 12px; }
#modal-nora .nora-hist-abrir:hover { background: rgba(255,255,255,0.04); }
#modal-nora .nora-hist-abrir b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-nora .nora-hist-abrir small { font-size: 12px; color: var(--text-muted); }
#modal-nora .nora-hist-borrar { appearance: none; width: 38px; height: 38px; border: 0; background: none; color: var(--text-subtle); border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
#modal-nora .nora-hist-borrar:hover { color: #e8907c; background: rgba(224,106,80,0.1); }
#modal-nora .nora-hist-vacio { text-align: center; color: var(--text-muted); padding: 36px 16px; font-size: 14.5px; line-height: 1.6; }
/* ============================================================================
v142 · Arranque «opción 11» (16-oct-2026)
============================================================================ */
#splash { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(120% 75% at 50% 38%, #173a31 0%, #0d2620 58%, #0a1d18 100%); transition: opacity .35s ease, visibility .35s; }
#splash.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)); animation: splashIn .5s cubic-bezier(.2,.8,.2,1) both; }
.splash-logo.ancho { width: 230px; height: auto; }
.splash-barra { position: absolute; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); width: 128px; height: 3px; margin-left: -64px; border-radius: 3px; background: rgba(212,175,55,.16); overflow: hidden; }
.splash-barra i { position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 3px; background: var(--accent); animation: splashBarra 1.15s ease-in-out infinite; }
.splash-pie { position: absolute; bottom: calc(44px + env(safe-area-inset-bottom)); font: 500 12.5px Manrope, system-ui, sans-serif; color: rgba(233,220,196,.45); letter-spacing: .3px; }
.splash-lento { display: none; margin-top: 26px; text-align: center; font: 500 14.5px Manrope, system-ui, sans-serif; color: rgba(233,220,196,.75); line-height: 1.6; }
.splash-lento button { display: block; margin: 12px auto 0; height: 42px; padding: 0 22px; border-radius: 12px; border: 1px solid rgba(212,175,55,.6); background: rgba(212,175,55,.12); color: var(--accent); font: 700 15px Manrope, system-ui, sans-serif; cursor: pointer; }
#splash.lento .splash-lento { display: block; }
@keyframes splashBarra { 0% { left: -42%; } 100% { left: 100%; } }
@keyframes splashIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash-logo { animation: none; } .splash-barra i { animation-duration: 2.4s; } }
/* mientras arranca la página de acceso queda tapada (sin parpadeo de la tarjeta antigua) */
body.auth-on #auth-container #loading-screen { visibility: hidden; }
/* saludo + «Actualizando…» encima de la caja mientras se pone al día */
.saludo-arranque { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font: 500 14px Manrope, system-ui, sans-serif; color: #a9b8ae; transition: opacity .3s, transform .3s; }
.saludo-arranque b { color: #efe3cc; font-weight: 700; }
.saludo-arranque.hidden { display: none; }
.saludo-arranque.saliendo { opacity: 0; transform: translateY(-4px); }
.saludo-arranque .pill-act { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 14px; background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.35); color: #e9dcc4; font: 600 12px Manrope, system-ui, sans-serif; white-space: nowrap; }
.saludo-arranque .pill-act i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(212,175,55,.25); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* mientras se pone al día no se añade ni se cierra (los datos aún pueden cambiar) */
body.actualizando #fab-plus, body.actualizando .action-buttons, body.actualizando .parte-strip-add, body.actualizando .pend-ok, body.actualizando .fab-scan { opacity: .45; pointer-events: none; }
/* v142b · con una ventana abierta el + no se ve nunca (la regla de «actualizando» le ganaba y salía encima de la ventana) */
body.modal-open #fab-plus, body.modal-open .fab-scan, body.en-pagina.modal-open #fab-plus { opacity: 0 !important; pointer-events: none !important; visibility: hidden; }
body.actualizando:not(.modal-open) #fab-plus { opacity: .45; }
/* ============================================================================
v143b · Arreglos de diseño del repaso general (16-oct-2026)
============================================================================ */
/* Calendario: 7 días por fila (salían 8 y los días caían bajo la cabecera que no era) */
.flatpickr-days, .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.flatpickr-day { max-width: none !important; flex-basis: 14.2857% !important; width: 14.2857% !important; }
.flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font-size: 16px !important; }
/* Cifra «Transacciones del día 7»: el número en pastilla, que no se confunda con el total */
.tx-count-badge { display: inline-grid !important; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: rgba(255,255,255,.08); font: 700 12px Manrope, system-ui, sans-serif !important; color: var(--text-muted) !important; vertical-align: middle; }
/* Zonas de toque de 44 px sin engordar los iconos */
/* (la X de las ventanas se dibuja con ::before/::after: su zona de toque se agranda con un borde transparente) */
.modal-close { border: 7px solid transparent !important; background-clip: padding-box !important; box-sizing: content-box !important; margin: -7px !important; }
.hora-edit-btn, .tx-foto-remove, .nm-copiar { position: relative; }
.hora-edit-btn::after, .tx-foto-remove::after, .nm-copiar::after { content: ''; position: absolute; inset: -8px; }
.viewing-banner-btn { min-height: 40px; }
/* Textos de botón sin mayúsculas gritonas (como el resto de la app) */
.btn, .app-tab, .view-mode-btn, .sub-adj, .action-buttons .btn { text-transform: none !important; letter-spacing: .2px !important; }
/* Nombres que no son proveedores (personal, músicos, otros) en minúscula normal */
.tx-item:not([data-tipo="albaran"]):not([data-tipo="factura_pagada"]) .tx-title { text-transform: none !important; }
/* Cajas de texto sin el asa de estirar */
textarea { resize: none; }
/* Caja cerrada: los importes no pegados al borde (ya no hay lápiz) */
body.caja-cerrada .tx-item .tx-amount { margin-right: 12px; }
/* Historial (iPad): la tarjeta no se estira a lo alto de la fila */
/* (en la cuadrícula del iPad no se estira hacia abajo; en el móvil cada tarjeta ocupa todo el ancho) */
#modal-history .history-item { width: 100%; box-sizing: border-box; }
@media (min-width: 601px) { #modal-history .history-item { align-self: start; } }
/* Encargados: correo, teléfono y último acceso bajan de línea en vez de cortarse */
#modal-admin .admin-item-meta { flex-wrap: wrap !important; white-space: normal !important; }
/* Nora: la burbuja propia en dorado suave (el dorado lleno es solo para la acción principal) */
#modal-nora .nm-yo .nm-burbuja { background: rgba(212,175,55,.18) !important; color: var(--text) !important; border: 1px solid rgba(212,175,55,.35); font-weight: 500; }
#modal-nora .nora-lead { min-width: 0; }
/* Avisos flotantes abajo, encima de los botones (arriba tapaban el botón de salir) */
.toast { top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)) !important; }
/* Pastilla de lecturas: «Lecturas 2/5» en pantallas grandes, solo «2/5» en el móvil */
.icon-btn-badge-lbl { display: none; margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
@media (min-width: 601px) { .icon-btn-badge-lbl { display: inline; } #app-lecturas-x-btn { width: auto !important; padding: 0 12px !important; } }
/* Aviso del cierre con icono de línea */
.warning-banner-icon { color: var(--accent); display: flex; justify-content: center; }
.warning-banner-text { text-transform: none !important; letter-spacing: 0 !important; }
/* Enlace del personal en pantalla grande: formulario a un ancho cómodo */
@media (min-width: 900px) { #p-check, #p-parte, #p-tipo { max-width: 720px; margin-inline: auto; } }
/* Móvil estrecho (360 px): la cabecera en una sola fila */
@media (max-width: 380px) {
.app-header { flex-wrap: nowrap !important; }
.app-header-brand-text { font-size: 14px !important; letter-spacing: .4px !important; }
#caja-fecha { white-space: nowrap; }
#modal-reports .report-card:not(:first-child) .report-card-sub { white-space: normal !important; overflow: visible !important; }
}
/* iPad vertical (1000-1120 px): la cabecera en una fila sin salirse */
@media (min-width: 1000px) and (max-width: 1120px) {
.app-tab { padding: 0 14px !important; }
.app-tabs { margin-left: 12px !important; }
.app-header-user-role { display: none; }
}
/* iPad y PC: «Nueva transacción» y «Cerrar caja» siempre a mano, flotando abajo (sin barra de fondo) */
@media (min-width: 601px) {
body:not(.en-pagina):not(.caja-cerrada) .action-buttons { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; pointer-events: none; }
body:not(.en-pagina):not(.caja-cerrada) .action-buttons .btn { pointer-events: auto; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
}
/* v143c · los avisos flotantes no tapan toques (un toque en «Cerrar caja» se perdía) */
.toast { pointer-events: none !important; }
.toast button, .toast a { pointer-events: auto; }
/* ============================================================================
v144 · Fichas: «Otras acciones» al final, cada una en su fila (como Contactos del iPhone)
============================================================================ */
.acciones-ficha { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.acciones-ficha.hidden { display: none; }
.acciones-ficha-t { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin: 0 2px 10px; }
.acciones-ficha .form-actions-left { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100%; }
.acciones-ficha .form-actions-left .btn {
display: grid !important; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; text-align: left;
width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 56px !important; padding: 10px 14px !important;
border-radius: 14px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; flex: none !important;
}
.acciones-ficha .form-actions-left .btn.hidden { display: none !important; }
.acciones-ficha .form-actions-left .btn::before { content: ''; grid-row: span 2; width: 22px; height: 22px; background: currentColor;
-webkit-mask: var(--af-ico) center / 22px no-repeat; mask: var(--af-ico) center / 22px no-repeat; }
.acciones-ficha .form-actions-left .btn::after { content: attr(data-hint); grid-column: 2; font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
#btn-admin-restore { order: 1; color: var(--accent) !important; --af-ico: url("data:image/svg+xml;utf8,"); }
#btn-admin-archive { order: 2; color: #e3b45f !important; --af-ico: url("data:image/svg+xml;utf8,"); }
#btn-admin-delete { order: 3; color: #e8907c !important; --af-ico: url("data:image/svg+xml;utf8,"); }
#btn-admin-purge { order: 4; color: #f08a78 !important; border-color: rgba(224,106,80,.45) !important; background: rgba(224,106,80,.08) !important; --af-ico: url("data:image/svg+xml;utf8,"); }
.acciones-ficha .form-actions-left .btn:active { transform: scale(.99); }
@media (hover: hover) { .acciones-ficha .form-actions-left .btn:hover { background: rgba(255,255,255,.06) !important; } }
@media (min-width: 601px) { .acciones-ficha .form-actions-left { display: grid !important; grid-template-columns: 1fr 1fr; } }
#modal-admin-edit .form-actions > .form-actions-right { display: flex; gap: 10px; flex: 1 1 100%; justify-content: flex-end; }
@media (max-width: 600px) { #modal-admin-edit .form-actions > .form-actions-right > .btn { flex: 1 1 0 !important; } }
/* v144c · partes sin incidencias en una línea */
.inc-parte-sin { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--text-muted); padding: 6px 2px 2px; line-height: 1.5; }
.inc-parte-sin .inc-ok { color: #7fd6a6; font-weight: 800; }
#modal-reports .inc-estado.hidden { display: none !important; }
/* ============================================================================
v145 · «Cerrar caja» dentro del + en el móvil (Robert, 17-oct-2026)
============================================================================ */
.sheet-nueva-sep { display: none; }
@media (max-width: 600px) {
.action-buttons { display: none !important; } /* el cierre está en el + */
#sheet-nueva .sheet-cerrar { margin-top: 8px !important; }
#sheet-nueva .sheet-cerrar .sheet-nueva-ico { color: #ec9a86 !important; border-color: rgba(224,106,80,.55) !important; background: rgba(224,106,80,.10) !important; }
#sheet-nueva .sheet-cerrar .sheet-nueva-txt b { color: #f0a893; }
#sheet-nueva .sheet-cerrar small.falta { color: #e3b45f !important; }
.tx-panel { padding-bottom: 8px; }
}
@media (min-width: 601px) { #sheet-cerrar { display: none !important; } }
/* ============================================================================
v146 · Errores que saltan arriba en las ventanas (como las apps profesionales)
============================================================================ */
.err-pop { position: sticky; top: 64px; z-index: 7; display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 14px; padding: 12px 14px;
border-radius: 14px; background: #4a2a24; border: 1px solid rgba(240,138,120,.55); color: #ffd9cf; font: 600 14.5px/1.4 Manrope, system-ui, sans-serif;
box-shadow: 0 10px 24px rgba(0,0,0,.45); animation: errIn .28s cubic-bezier(.2,.8,.2,1) both; cursor: pointer; }
.err-pop svg { flex: 0 0 auto; color: #f08a78; margin-top: 1px; }
.err-pop.saliendo { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
@keyframes errIn { 0% { opacity: 0; transform: translateY(-10px); } 60% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
.campo-error, input.campo-error, select.campo-error, textarea.campo-error, .asel-btn.campo-error { border-color: #f08a78 !important; box-shadow: 0 0 0 3px rgba(240,138,120,.22) !important; animation: errShake .32s ease; }
.tx-fotos.campo-error, .tx-foto-add.campo-error { border-radius: 14px; outline: 2px solid rgba(240,138,120,.7); outline-offset: 3px; }
@keyframes errShake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .err-pop, .campo-error { animation: none !important; } }
/* ============================================================================
v147 · Mantener pulsado el + = cerrar caja (anillo que se llena) + pista
============================================================================ */
#fab-plus { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* v147c: anillo SVG que llena la app (más compatible con el iPhone que el degradado animado) */
#fab-plus { touch-action: none; overflow: visible !important; }
#fab-plus.pulsando { transition: transform .05s linear, box-shadow .2s !important; will-change: transform; }
#fab-plus .pl-anillo { position: absolute; left: -9px; top: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .15s; overflow: visible; }
#fab-plus.pulsando .pl-anillo, #fab-plus.pl-pop .pl-anillo { opacity: 1; }
#fab-plus .pl-fondo { fill: none; stroke: rgba(224,106,80,.25); stroke-width: 7; }
#fab-plus .pl-arco { fill: none; stroke: #ff7a5c; stroke-width: 7; stroke-linecap: round; }
#fab-plus.pulsando { box-shadow: 0 0 0 4px rgba(14,38,32,.97), 0 0 26px 6px rgba(255,122,92,.45) !important; }
#fab-plus.pl-pop { animation: plPop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes plPop { 0% { transform: translateY(-8px) scale(1.4); } 45% { transform: translateY(-10px) scale(1.55); } 100% { transform: none; } }
.pl-aviso { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); bottom: calc(128px + env(safe-area-inset-bottom)); z-index: 1260;
padding: 10px 16px; border-radius: 14px; background: #4a2a24; border: 1px solid rgba(255,122,92,.6); color: #ffd9cf; font: 700 14.5px Manrope, system-ui, sans-serif;
box-shadow: 0 10px 26px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .15s, transform .15s; pointer-events: none; }
.pl-aviso.ver { opacity: 1; transform: none; }
.pl-aviso.listo { background: #b85a45; color: #fff; }
.pl-haptic { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
@media (min-width: 601px) { .pl-aviso { display: none; } }
.pista-cerrar { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 1250; padding: 10px 14px; border-radius: 12px;
background: #1f4439; border: 1px solid rgba(255,255,255,.14); color: #efe3cc; font: 600 13.5px Manrope, system-ui, sans-serif; box-shadow: 0 10px 26px rgba(0,0,0,.5); white-space: nowrap; animation: errIn .3s both; }
.pista-cerrar::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-top-color: #1f4439; border-bottom: 0; }
.pista-cerrar.saliendo { opacity: 0; transition: opacity .35s; }
@media (min-width: 601px) { .pista-cerrar { display: none; } }
body.modal-open .pista-cerrar, body.sheet-open .pista-cerrar, body.en-pagina .pista-cerrar { display: none !important; }
/* ============================================================================
v148 · Cabecera del iPad/PC que siempre cabe (Robert: el botón de salir se salía)
============================================================================ */
@media (min-width: 601px) {
.app-header { gap: 12px !important; overflow: hidden; }
.app-header-brand { flex: 0 1 auto !important; min-width: 0 !important; }
.app-header-brand-text { font-size: clamp(15px, 1.45vw, 20px) !important; letter-spacing: .8px !important; overflow: hidden; text-overflow: ellipsis; }
.app-header-user { flex: 0 0 auto !important; gap: 8px !important; margin-left: auto; }
.app-header-user-role { display: none !important; }
.app-header-user-name { max-width: 110px; }
/* Transacciones del día alineado a la izquierda, como en el móvil */
.tx-panel-header { justify-content: flex-start !important; text-align: left !important; }
.tx-panel-header .tx-panel-title { margin-right: auto; }
}
@media (min-width: 1000px) {
.app-tabs { flex: 0 1 auto !important; min-width: 0 !important; margin-left: 8px !important; }
.app-tab { padding: 0 clamp(10px, 1.3vw, 20px) !important; }
}
/* pantallas justas (iPad vertical, Safari con barra lateral…): lecturas solo «0/5» */
@media (min-width: 601px) and (max-width: 1240px) {
.icon-btn-badge-lbl { display: none !important; }
#app-lecturas-x-btn { padding: 0 10px !important; }
}
/* v148 · «Escanear con IA» en la ventana Nueva transacción (iPad/PC); en el móvil ya está en el + */
.picker-scan { margin-bottom: 10px; border-color: rgba(167,139,250,.55) !important; background: linear-gradient(135deg, rgba(90,64,128,.35), rgba(123,95,172,.22)) !important; }
.picker-scan .picker-upload-ico { background: linear-gradient(135deg, #5a4080, #7b5fac) !important; color: #f5e8ff !important; }
@media (max-width: 600px) { .picker-scan { display: none !important; } }
/* ============================================================================
v149 · iPad horizontal y PC (≥1180 px): caja en dos columnas
============================================================================ */
.caja-lateral, .caja-principal { display: contents; }
.btn-scan-lateral { display: none !important; }
@media (min-width: 1180px) {
body.dos-columnas #app-shell { max-width: 1320px !important; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; align-items: start; grid-auto-flow: row dense; }
body.dos-columnas #app-shell > * { grid-column: 1 / -1; min-width: 0; }
body.dos-columnas #app-shell > .caja-principal { grid-column: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; margin-bottom: 24px; }
body.dos-columnas .caja-principal > .panel { margin: 0 !important; }
body.dos-columnas #app-shell > .caja-lateral {
grid-column: 2; display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(16px + env(safe-area-inset-top));
max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: none; padding-bottom: 8px;
}
body.dos-columnas .caja-lateral::-webkit-scrollbar { display: none; }
body.dos-columnas .caja-lateral > .panel, body.dos-columnas .caja-lateral > .parte-strip { margin: 0 !important; }
/* la fecha: título arriba, apertura y encargado debajo */
body.dos-columnas .caja-lateral .panel-caja { padding: 16px 18px !important; }
body.dos-columnas .caja-lateral .panel-caja .panel-header { flex-wrap: wrap !important; row-gap: 8px; align-items: center; }
body.dos-columnas .caja-lateral .panel-caja .panel-title { font-size: 22px !important; }
body.dos-columnas .caja-lateral .caja-meta { order: 3; flex-basis: 100%; margin: 0 !important; }
body.dos-columnas .caja-lateral #cierre-actions-top { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
body.dos-columnas .caja-lateral #cierre-actions-top .btn { width: 100% !important; min-width: 0 !important; }
/* partes */
body.dos-columnas .caja-lateral .parte-strip { padding: 14px 16px !important; flex-wrap: wrap; row-gap: 8px; }
/* botones: en columna, siempre a la vista */
body.dos-columnas .caja-lateral .action-buttons { position: static !important; pointer-events: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 4px 0 0 !important; padding: 0 !important; }
body.dos-columnas .caja-lateral .action-buttons .btn { width: 100% !important; min-width: 0 !important; height: 52px !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important; justify-content: center; font-size: 15.5px !important; border-radius: 14px !important; }
body.dos-columnas .caja-lateral .btn-scan-lateral { display: inline-flex !important; align-items: center; gap: 8px; color: #f5e8ff !important;
background: linear-gradient(135deg, #5a4080, #7b5fac) !important; border: 1px solid rgba(167,139,250,.55) !important; }
body.dos-columnas.caja-cerrada .caja-lateral .btn-scan-lateral, body.dos-columnas.sin-caja .caja-lateral .btn-scan-lateral { display: none !important; }
body.dos-columnas .fab-scan { display: none !important; }
/* transacciones: la lista aprovecha el ancho; el vacío sin tanto hueco */
body.dos-columnas #tx-empty { padding: 36px 0 30px !important; }
body.dos-columnas .panel-tx { padding: 18px 22px 20px !important; }
}
@media (min-width: 1180px) {
/* partes en la columna: título y «+ Parte» arriba, pastillas debajo enteras */
body.dos-columnas .caja-lateral .parte-strip { display: grid !important; grid-template-columns: 1fr auto; align-items: center; row-gap: 10px; }
body.dos-columnas .caja-lateral .parte-strip-chips { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; }
body.dos-columnas .caja-lateral .parte-strip-chip { white-space: normal !important; max-width: none !important; }
body.dos-columnas .caja-lateral .parte-strip-add { grid-column: 2; grid-row: 1; }
/* la fecha: el estado al lado del título, sin bajar de línea */
body.dos-columnas .caja-lateral .panel-caja .panel-title { font-size: 20px !important; }
}
/* cabecera: pestañas en el centro (iPad/PC) */
@media (min-width: 1000px) {
.app-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.app-header-brand { justify-self: start; grid-column: 1; grid-row: 1; }
.app-tabs { justify-self: center; margin-left: 0 !important; order: 0 !important; grid-column: 2 !important; grid-row: 1; }
.app-header-user { justify-self: end; margin-left: 0 !important; order: 0 !important; grid-column: 3; grid-row: 1; }
}
/* Informes en iPad/PC: botones a su tamaño y a la derecha */
@media (min-width: 601px) {
#report-actions:not(.hidden) { display: flex !important; justify-content: flex-end; gap: 10px; }
#report-actions .btn { flex: 0 0 auto !important; width: auto !important; min-width: 180px; height: 46px !important; padding: 0 22px !important; }
}
@media (min-width: 1180px) {
body.dos-columnas.caja-cerrada .caja-lateral .action-buttons { display: none !important; }
body.dos-columnas .caja-lateral .caja-meta { flex: 1 1 auto !important; flex-basis: auto !important; }
body.dos-columnas .caja-lateral #caja-estado { order: 4; margin-left: auto; }
}
/* ============================================================================
v150 · Historial: una sola lista de arriba abajo (la más reciente primero); en iPad/PC cada caja es una fila
============================================================================ */
@media (min-width: 601px) {
#modal-history .history-list { display: flex !important; flex-direction: column; gap: 8px !important; grid-template-columns: none !important; }
#modal-history .history-item { display: grid !important; grid-template-columns: minmax(230px, 1.3fr) minmax(0, 2fr); align-items: center; column-gap: 24px; padding: 14px 18px !important; align-self: stretch; }
#modal-history .history-item-header { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; }
#modal-history .history-item-meta { grid-column: 1; grid-row: 2; margin-top: 4px !important; }
#modal-history .history-stats { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; padding: 0 !important; border: 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#modal-history .history-stat { text-align: right; }
#modal-history .history-item-header > div:last-child { margin-left: auto; }
}
@media (min-width: 1180px) {
#modal-history .history-item { grid-template-columns: minmax(300px, 1.2fr) minmax(0, 2fr); }
}
/* v150 · pestañas de arriba sin recuadro, con icono; la activa en dorado suave */
@media (min-width: 601px) {
.app-tabs { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 4px !important; }
.app-tab { display: inline-flex !important; align-items: center; gap: 8px; height: 44px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 12px !important;
background: none !important; border: 1px solid transparent !important; color: var(--text-muted) !important; font-weight: 600 !important; box-shadow: none !important; }
.app-tab svg { flex: 0 0 auto; opacity: .85; }
.app-tab.active { color: var(--accent) !important; background: rgba(212,175,55,.12) !important; border-color: rgba(212,175,55,.38) !important; font-weight: 700 !important; }
.app-tab.active svg { opacity: 1; }
@media (hover: hover) { .app-tab:not(.active):hover { color: var(--text) !important; background: rgba(255,255,255,.05) !important; } }
}
@media (min-width: 601px) and (max-width: 1100px) { .app-tab svg { display: none; } .app-tab { padding: 0 12px !important; } }
/* ============================================================================
v151 · Informes por día: ‹ fecha › con calendario
============================================================================ */
.report-dia-bar { display: flex; align-items: stretch; gap: 8px; margin: 2px 0 12px; position: relative; }
.report-dia-bar.hidden { display: none !important; }
.rd-flecha { flex: 0 0 52px; height: 56px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--accent); font: 700 28px/1 Manrope, system-ui, sans-serif; cursor: pointer; }
.rd-flecha:disabled { opacity: .3; cursor: default; }
.rd-fecha { flex: 1 1 auto; min-width: 0; height: 56px; border-radius: 14px; border: 1px solid rgba(212,175,55,.45); background: rgba(212,175,55,.10); color: var(--text); cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: Manrope, system-ui, sans-serif; }
.rd-fecha span { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 8px; }
.rd-fecha small { font-size: 12px; color: var(--accent); font-weight: 600; }
.rd-input { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
@media (min-width: 601px) { .report-dia-bar { max-width: 560px; } }
/* ============ v152 · Ajustes › Telegram (bot de la caja) ============ */
#admin-section-telegram { max-width: 640px; }
.tg-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.tg-cab-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: #2a9fd8; }
.tg-cab-tit { font-weight: 700; font-size: 16px; color: var(--text); }
.tg-cab-sub { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.tg-chip { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.tg-chip.ok { color: var(--success, #3fb27f); border-color: currentColor; }
.tg-bloque { border-top: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tg-bloque-tit { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tg-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--text); }
.tg-fila { display: flex; gap: 8px; align-items: center; width: 100%; }
.tg-input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input, rgba(0,0,0,.2)); color: var(--text); font-family: inherit; }
.tg-input:focus { outline: none; border-color: var(--accent); }
.tg-input-num { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; }
.tg-eur { color: var(--text-muted); margin-right: 4px; }
.tg-chats { display: flex; flex-direction: column; width: 100%; }
.tg-chat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.tg-chat:last-child { border-bottom: 0; }
.tg-chat-n { font-weight: 600; color: var(--text); }
.tg-chat-s { font-size: 12px; color: var(--text-muted); }
.tg-vacio, .tg-nota { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tg-enlace { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tg-lista { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.tg-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.tg-fila .btn, .tg-fila .btn-mini { flex: none; width: auto; }
#admin-section-telegram a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.tg-cab { flex-wrap: wrap; }
.tg-cab > div:nth-child(2) { flex: 1; min-width: 0; }
#admin-section-telegram .tg-bloque > .btn, #admin-section-telegram .tg-enlace .btn { width: auto; padding-left: 22px; padding-right: 22px; }
.tg-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
.tg-cab-sub { font-size: 12.5px; }
.tg-cab > div:nth-child(2) { flex: 1 1 calc(100% - 60px); }
.tg-cab { row-gap: 6px; }
.tg-chip { margin-left: 52px; }
.tg-fila .btn { padding-left: 16px; padding-right: 16px; }
#admin-section-telegram .tg-bloque > .btn, #admin-section-telegram .tg-enlace .btn { width: 100%; }
.tg-enlace { width: 100%; }
}
/* ============ v152b · Telegram: un bot por local ============ */
.tg-intro { font-size: 14px; line-height: 1.5; color: var(--text); margin: 4px 0 10px; }
.tg-como { margin: 0 0 6px; font-size: 13.5px; color: var(--text-muted); }
.tg-como summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--accent); }
.tg-como .tg-pasos { margin: 6px 0 4px; font-size: 13.5px; }
.tg-bot { border-top: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tg-bot .tg-cab { margin: 0; width: 100%; }
.tg-fila-umbral .tg-nota { flex: 0 1 auto; margin-right: 6px; }
.tg-bot > .btn, .tg-bot .tg-enlace .btn { width: auto; padding-left: 22px; padding-right: 22px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
.tg-bot > .btn, .tg-bot .tg-enlace .btn { width: 100%; }
.tg-fila-umbral { flex-wrap: wrap; }
.tg-fila-umbral .tg-nota { flex: 1 1 100%; }
}