@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap'); :root { --bg: #F5F4EF; --surface: #FFFFFF; --bg-alt: #F4F6FA; --ink: #26261F; --ink-soft: #6E6E64; --line: #E4E6DE; --plum: #2E3A2F; --plum-soft: #E8ECE6; --gold: #C9A24B; --gold-soft: #F5EDD9; --green: #3B7A57; --green-soft: #E6F0EA; --red: #B0453C; --text-secondary: #6E6E64; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; display: flex; } button { font-family: inherit; cursor: pointer; color: inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } /* Sidebar */ .sidebar { width: 248px; background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px; } .sidebar .brand { padding: 0 8px 28px; } .sidebar nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; min-height: 0; } .nav-group { display: flex; flex-direction: column; gap: 3px; } .nav-group + .nav-group-label, .nav-group-label { margin: 18px 14px 8px; padding-top: 16px; font-size: 11.5px; font-weight: 700; color: var(--plum); letter-spacing: 0.14em; text-transform: uppercase; border-top: 1px solid var(--line); } .navlink { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; border: none; background: transparent; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; text-align: left; text-decoration: none; transition: all .15s; } .navlink.active { background: var(--plum); color: #fff; font-weight: 600; } .nav-badge { background: var(--red); color: #fff; border-radius: 999px; padding: .05rem .45rem; font-size: .72rem; font-weight: 700; margin-left: .2rem; flex-shrink: 0; line-height: 1.4; } .sidebar-footer { margin-top: auto; padding: 14px 12px; border-radius: 12px; background: var(--gold-soft); font-size: 12px; color: var(--ink-soft); line-height: 1.6; } .sf-saludo { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 2px; } .sf-saludo strong { color: var(--plum); font-weight: 600; } .sf-fecha { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; } .sf-ayuda { display: block; font-size: 11.5px; font-weight: 600; color: var(--gold); text-decoration: none; margin-bottom: 10px; transition: color .15s; } .sf-ayuda:hover { color: var(--plum); text-decoration: underline; } .sf-version { font-size: 10.5px; color: var(--ink-soft); opacity: .6; } /* Main */ /* min-width:0 permite que el flex-child encoja cuando tablas anchas usan overflow-x:auto sin este valor, el overflow desborda hacia la izquierda en lugar de generar scrollbar */ .main { flex: 1; padding: 34px 38px; max-width: 1180px; margin: 0 auto; width: 100%; min-width: 0; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; } .page-header h1 { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -0.02em; } .page-header p { color: var(--ink-soft); margin: 6px 0 0; font-size: 14.5px; } /* Toast */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 30px rgba(42,31,26,.25); display: flex; align-items: center; gap: 9px; z-index: 100; } /* POS layout */ .pos-grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; } .search-wrap { position: relative; margin-bottom: 16px; } .search-wrap input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 11px; border: 1px solid var(--line); font-size: 14.5px; background: var(--surface); color: var(--ink); outline: none; } .search-icon { position: absolute; left: 14px; top: 13px; color: var(--ink-soft); } .section-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; margin: 4px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--plum); color: var(--ink); } .section-title-unas { border-bottom-color: var(--gold); margin-top: 28px; } /* KPIs e insignias de estado (Inventario) */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; } .kpi-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .kpi-label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .kpi-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--ink); margin-top: 4px; } .kpi-sub { font-size: .75rem; color: var(--ink-soft); margin-top: 3px; display: block; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; } /* Alertas contextuales (ficha cliente, etc.) */ .alerta-card { padding: 12px 16px; border-radius: 8px; max-width: 600px; margin-bottom: 20px; border-left: 4px solid; } .alerta-verde { background: #f0fdf4; border-left-color: var(--green); } .alerta-oro { background: #fffbeb; border-left-color: var(--gold); } .alerta-roja { background: #fef2f2; border-left-color: var(--red); } .alerta-neutra { background: var(--bg); border-left-color: var(--line); } /* KPI cards con acento de color por urgencia/estado */ .rep-kpi-row { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; } .rep-kpi-card { flex: 1; min-width: 160px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 16px; position: relative; overflow: hidden; } .rep-kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; } .rep-kpi-critico::after { background: #e74c3c; } .rep-kpi-urgente::after { background: #d4a017; } .rep-kpi-proximo::after { background: #3498db; } .rep-kpi-compra::after { background: var(--plum); } .rep-kpi-ok::after { background: var(--green); } .rep-kpi-icon { font-size: 1.4rem; position: absolute; top: 14px; right: 16px; opacity: .55; line-height: 1; } .rep-kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin-bottom: 10px; } .rep-kpi-value { font-size: 2.1rem; font-weight: 800; line-height: 1; } .rep-kpi-sub { font-size: .72rem; color: var(--text-secondary); margin-top: 7px; line-height: 1.4; } .rep-kpi-critico .rep-kpi-value { color: #c0392b; } .rep-kpi-urgente .rep-kpi-value { color: #856404; } .rep-kpi-proximo .rep-kpi-value { color: #1a6496; } .rep-kpi-compra .rep-kpi-value { color: var(--plum); } .rep-kpi-ok .rep-kpi-value { color: var(--green); } /* Badges de urgencia (semáforo) — usables con clase base .badge */ .badge-critico { background: #fde8e8; color: #c0392b; font-weight: 700; } .badge-urgente { background: #fff3cd; color: #856404; font-weight: 700; } .badge-proximo { background: #e8f4fd; color: #1a6496; } .badge-ok-status { background: #f0fdf4; color: #15803d; } /* especificidad doble para que font-weight gane a .badge cuando se usan combinados */ .badge.badge-critico { font-weight: 700; } .badge.badge-urgente { font-weight: 700; } /* Barra de filtro con pills (bancos, agenda, etc.) */ .periodo-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; } .periodo-bar-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-right: 4px; white-space: nowrap; } .year-pills, .tipo-pills { display: flex; gap: 4px; flex-wrap: wrap; } .year-pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: .8rem; font-weight: 500; color: var(--text-secondary); background: #f3f4f6; border: 1px solid transparent; text-decoration: none; transition: background .12s, color .12s; white-space: nowrap; } .year-pill:hover { background: #e8e8f0; color: var(--plum); } .year-pill-active { background: var(--plum) !important; color: #fff !important; border-color: var(--plum) !important; } .year-pill-ing.year-pill-active { background: var(--green) !important; border-color: var(--green) !important; } .year-pill-egr.year-pill-active { background: var(--red) !important; border-color: var(--red) !important; } .periodo-limpiar { font-size: .8rem; color: var(--text-secondary); text-decoration: none; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; } .periodo-limpiar:hover { color: var(--plum); border-color: var(--plum); } .periodo-bar .sel { width: auto; } /* Desglose de gastos ("¿Dónde va el dinero?") */ .gasto-desglose-section { margin-bottom: 24px; } .desglose-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; } .gasto-desglose-card { padding: 16px 20px; margin-bottom: 0; } .desglose-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .desglose-subtitulo { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .desglose-total { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); } .gasto-twin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .gasto-row-bar { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); } .gasto-row-bar:last-child { border-bottom: none; } .gasto-row-nombre { min-width: 140px; font-size: .85rem; color: var(--ink); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .gasto-bar-track { flex: 1; background: var(--line); border-radius: 99px; height: 7px; overflow: hidden; min-width: 60px; } .gasto-bar-fill { height: 7px; border-radius: 99px; background: var(--plum); } .gasto-bar-var { background: var(--gold); } .gasto-bar-dep { background: #9ca3af; } .gasto-row-monto { min-width: 80px; text-align: right; font-size: .85rem; font-weight: 600; color: var(--ink); flex-shrink: 0; } .gasto-row-pct { min-width: 42px; text-align: right; font-size: .75rem; color: var(--ink-soft); flex-shrink: 0; } .gasto-row-mini .gasto-row-nombre { min-width: 100px; font-size: .8rem; max-width: 150px; } .gasto-row-mini .gasto-row-monto { font-size: .8rem; min-width: 70px; } .gasto-empty-msg { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 0; } @media (max-width: 680px) { .gasto-twin-grid { grid-template-columns: 1fr; } } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge-green { background: var(--green-soft); color: var(--green); } .badge-gold { background: var(--gold-soft); color: var(--gold); } .badge-red { background: #FBEAE7; color: var(--red); } .badge-gray { background: var(--line); color: var(--ink-soft); } .badge-plum { background: var(--plum-soft); color: var(--plum); } .cat-block { margin-bottom: 22px; } .cat-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cat-dot { width: 8px; height: 8px; border-radius: 3px; } .cat-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } .cat-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .servicio-card { text-align: left; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); transition: all .12s; display: flex; flex-direction: column; gap: 8px; min-height: 78px; width: 100%; } .servicio-card:hover { transform: translateY(-1px); } .servicio-nombre { font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--ink); } .servicio-precio { font-size: 15px; font-weight: 600; margin-top: auto; } .servicio-check { text-align: left; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); transition: all .12s; display: flex; flex-direction: column; gap: 8px; min-height: 78px; width: 100%; cursor: pointer; } .servicio-check:hover { transform: translateY(-1px); } .servicio-check input[type="checkbox"] { margin-bottom: 4px; } .servicio-check:has(input:checked) { border-color: var(--plum); background: var(--plum-soft); } /* Ticket */ .ticket { position: sticky; top: 20px; background: var(--surface); border-radius: 18px; border: 1px solid var(--line); overflow: hidden; } .ticket-header { padding: 16px 18px; border-bottom: 1px solid var(--line); font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; } .ticket-body { padding: 18px; display: flex; flex-direction: column; gap: 13px; } .ticket-empty { text-align: center; color: var(--ink-soft); font-size: 13.5px; padding: 18px 0; } .ticket-items { display: flex; flex-direction: column; gap: 13px; max-height: 320px; overflow-y: auto; padding-right: 4px; } .ticket-item { display: flex; align-items: center; gap: 8px; } .ticket-item .info { flex: 1; } .ticket-item .nombre { font-size: 13.5px; font-weight: 500; } .ticket-item .meta { font-size: 12px; color: var(--ink-soft); } .ticket-item .precio { font-size: 13.5px; font-weight: 600; } .ticket-item .quitar { border: none; background: transparent; color: var(--ink-soft); padding: 2px; display: flex; } .totales { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; } .row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; } .row.soft { color: var(--ink-soft); } .row.bold { font-size: 15px; font-weight: 600; } .sel { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; background: var(--bg); color: var(--ink); outline: none; } .sel.anticipo { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 600; } .anticipo-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--green-soft); border-radius: 10px; } .btn-cobrar { margin-top: 4px; padding: 14px; border-radius: 12px; border: none; background: var(--plum); color: #fff; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } /* Tables */ .table-card { background: var(--surface); border-radius: 16px; border: 1px solid var(--line); overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead tr { background: var(--bg); text-align: left; } th { padding: 13px 16px; font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.03em; text-transform: uppercase; } td { padding: 13px 16px; color: var(--ink); border-top: 1px solid var(--line); vertical-align: middle; } td .sel { padding: 7px 10px; } td input[type="checkbox"] { width: 18px; height: 18px; } /* Inline forms (catálogo, clientes, anticipos) */ .inline-form { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .inline-form .sel { width: auto; flex: 1; min-width: 140px; } /* Dentro de inline-form los botones no necesitan margin-top propio */ .inline-form .btn-sm, .inline-form .btn-sm-outline, .inline-form .btn-sm-danger-outline { margin-top: 0; } .btn-sm { padding: 9px 16px; border-radius: 10px; border: none; background: var(--plum); color: #fff; font-size: 13.5px; font-weight: 600; margin-top: 12px; } .btn-sm-outline { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--plum); background: transparent; color: var(--plum); font-size: 13.5px; font-weight: 600; margin-top: 12px; cursor: pointer; } /* Catálogo: alternar entre vista normal y edición */ .edit-toggle { display: none; } .edit-field { display: none; } .edit-toggle:checked ~ .view-field { display: none; } .edit-toggle:checked ~ form .view-field { display: none; } .edit-toggle:checked ~ form td .edit-field { display: inline-block; } .edit-toggle:checked ~ form td input[type="checkbox"].edit-field { display: inline; } .edit-toggle:checked ~ form button.edit-field { display: inline-block; } .edit-toggle:checked ~ .edit-field.inline-form { display: flex; } .toggle-off { display: none; } .edit-toggle:checked ~ .toggle-on { display: none; } .edit-toggle:checked ~ .toggle-off { display: inline-block; } /* Modal de confirmación */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9000; background: rgba(42,31,26,.48); display: flex; align-items: center; justify-content: center; } .modal-card { background: var(--surface); border-radius: 16px; padding: 28px 32px; max-width: 440px; width: 90%; box-shadow: 0 8px 40px rgba(42,31,26,.2); animation: modal-in .18s ease; } @keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } .modal-titulo { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .modal-cuerpo { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; margin-bottom: 24px; white-space: pre-line; } .modal-acciones { display: flex; gap: 10px; justify-content: flex-end; } .btn-sm-danger { padding: 9px 18px; border-radius: 10px; border: none; background: var(--red); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn-sm-danger:hover { background: #943530; } .btn-sm-danger-outline { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--red); background: transparent; color: var(--red); font-size: 13.5px; font-weight: 600; margin-top: 12px; cursor: pointer; } .btn-sm-danger-outline:hover { background: #FBEAE7; } /* Login */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; } .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; width: 100%; max-width: 360px; } .login-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .login-field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .login-field input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14.5px; background: var(--bg); color: var(--ink); outline: none; } .auth-logo-wrap { text-align: center; padding-bottom: 14px; } .auth-logo { max-width: 300px; width: 100%; display: block; margin: 0 auto; } .login-error { background: var(--red); color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; text-align: center; } /* Topbar */ .topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; color: var(--ink-soft); } .topbar form { display: inline; } /* Botones del topbar — grupo unificado */ .topbar-actions { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex-shrink: 0; } .topbar-btn { background: transparent; border: none; border-right: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 500; padding: 5px 13px; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .15s, color .15s; font-family: inherit; display: inline-flex; align-items: center; } .topbar-btn:last-child { border-right: none; } .topbar-btn:hover { background: var(--plum-soft); color: var(--plum); } .topbar-btn:active { opacity: .8; } .topbar-btn.danger:hover { background: #fef2f2; color: var(--red); } .sidebar-logo { width: 100%; height: auto; display: none; } [data-theme="light"] .sidebar-logo-light { display: block; } [data-theme="dark"] .sidebar-logo-dark { display: block; } /* Barras de desglose (Dashboard Financiero) */ .bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .bar-label { width: 160px; font-size: 13px; color: var(--ink-soft); flex-shrink: 0; } .bar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; } .bar-fill { height: 100%; background: var(--plum); border-radius: 999px; } .bar-fill.gold { background: var(--gold); } .bar-value { width: 110px; text-align: right; font-size: 13px; font-weight: 600; flex-shrink: 0; } /* Agenda de citas */ .agenda-table th, .agenda-table td { text-align: center; font-size: 13px; } .agenda-table td.hora { font-weight: 600; color: var(--ink-soft); white-space: nowrap; width: 70px; } .agenda-cell-libre { color: var(--ink-soft); text-decoration: none; display: block; padding: 10px 6px; border-radius: 8px; font-size: 16px; } .agenda-cell-libre:hover { background: var(--bg); color: var(--plum); } .agenda-cell-cita { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line); text-align: left; } .agenda-cell-cita:hover { border-color: var(--plum); } .agenda-cell-cita .nombre { font-weight: 600; display: block; margin-bottom: 2px; } .agenda-cell-cita .meta { font-size: 12px; color: var(--ink-soft); display: block; } .agenda-cell-bloqueado { display: block; padding: 10px 6px; border-radius: 8px; text-align: center; color: var(--ink-soft); background: var(--line); font-size: 12px; font-weight: 600; } .agenda-cell-lleno { display: block; padding: 10px 6px; border-radius: 8px; text-align: center; color: var(--red); background: #fef2f2; font-size: 12px; font-weight: 500; opacity: .75; } /* Mobile */ @media (max-width: 780px) { body { flex-direction: column; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto; flex-direction: row; z-index: 50; border-right: none; border-top: 1px solid var(--line); padding: 10px 8px; } .sidebar .brand { display: none; } .sidebar nav { flex-direction: row; overflow-x: auto; flex: 1; } .navlink .navlabel { display: none; } .sidebar-footer { display: none; } .main { padding-left: 16px; padding-right: 16px; padding-bottom: 90px; } .pos-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .main { padding-left: 10px; padding-right: 10px; } .page-header h1 { font-size: 22px; } .kpi-row, .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-card { padding: 10px 12px; } .kpi-value { font-size: 20px; } .periodo-bar { flex-wrap: wrap; gap: 6px; } .modal-card { padding: 20px; } } /* Toasts de citas */ #cita-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .cita-toast { min-width: 280px; max-width: 400px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 4px 18px rgba(0,0,0,.14); opacity: 0; transform: translateX(30px); transition: opacity .22s ease, transform .22s ease; pointer-events: auto; } .cita-toast.show { opacity: 1; transform: translateX(0); } .cita-toast.hide { opacity: 0; transform: translateX(30px); } .cita-toast-error { background: #fef2f2; border-left: 4px solid var(--red); color: var(--red); } .cita-toast-warning { background: var(--gold-soft); border-left: 4px solid var(--gold); color: #7a5a10; } .cita-toast-success { background: var(--green-soft); border-left: 4px solid var(--green); color: var(--green); } /* ── Tarjetas de estaciones ── */ .estacion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; margin-top: 24px; } .estacion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease; } .estacion-card:hover { box-shadow: 0 3px 16px rgba(0,0,0,.09); } .estacion-card-inactiva { opacity: .65; } .estacion-card-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); } .estacion-card-nombre { font-size: 17px; font-weight: 700; color: var(--plum); } /* Fila de estado (activa/inactiva) */ .estacion-status-row { padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--bg); } .est-toggle-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .est-toggle-readonly { cursor: default; } .est-toggle-track { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .est-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; } .est-toggle-thumb { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; } .est-toggle-thumb::after { content: ''; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; background: white; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .est-toggle-input:checked ~ .est-toggle-thumb { background: var(--green); } .est-toggle-input:checked ~ .est-toggle-thumb::after { transform: translateX(16px); } .est-toggle-on { background: var(--green) !important; } .est-toggle-on::after { transform: translateX(16px); } .est-toggle-text { font-size: 13px; font-weight: 500; color: var(--ink); } .estacion-status-form { margin: 0; } /* Cuerpo */ .estacion-card-body { padding: 18px 22px; flex: 1; } .est-section-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; display: block; } .estacion-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 28px; } .chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--plum-soft); color: var(--plum); } .chip-unas { background: var(--gold-soft); color: #7a5a10; } .est-cats-empty { font-size: 13px; color: var(--ink-soft); font-style: italic; } /* Formulario de edición dentro de la tarjeta */ .est-field { margin-bottom: 16px; } .est-field:last-child { margin-bottom: 0; } .est-activa-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); width: 100%; box-sizing: border-box; } .est-cats-checks { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .est-cat-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; cursor: pointer; } .est-form-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } /* Pie de tarjeta */ .estacion-card-footer { padding: 13px 22px; border-top: 1px solid var(--line); background: var(--bg); } .estacion-edit-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: color .15s; } .estacion-edit-label:hover { color: var(--plum); } /* Toggle de edición por tarjeta (checkbox hack) */ .estacion-edit-toggle { display: none; } .estacion-edit-form { display: none; } .estacion-edit-toggle:checked ~ .estacion-card-body .estacion-edit-form { display: block; } .estacion-edit-toggle:checked ~ .estacion-card-body .estacion-cats-view { display: none; } .estacion-edit-toggle:checked ~ .estacion-status-row { display: none; } .estacion-edit-toggle:checked ~ .estacion-card-footer { display: none; } /* Tarjeta "Nueva estación" */ .estacion-card-nueva { border-style: dashed; } .estacion-nueva-hint { display: flex; align-items: center; justify-content: center; flex: 1; padding: 40px 20px; font-size: 15px; font-weight: 500; color: var(--ink-soft); text-align: center; } .estacion-nueva-icon { font-size: 34px; color: var(--plum); line-height: 1; } .estacion-nueva-form { display: none; } .estacion-edit-toggle:checked ~ .estacion-nueva-hint { display: none; } .estacion-edit-toggle:checked ~ .estacion-nueva-form { display: block; } /* ── Vista semanal ── */ .semana-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .semana-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 750px; } .semana-col { background: var(--surface); display: flex; flex-direction: column; border-right: 1px solid var(--line); } .semana-col:last-child { border-right: none; } .semana-col-hoy { background: #faf8ff; } .semana-col-header { padding: 14px 12px 10px; border-bottom: 1px solid var(--line); background: var(--bg); text-align: center; } .semana-col-hoy .semana-col-header { background: var(--plum-soft); } .semana-dia-link { text-decoration: none; display: block; } .semana-dia-nombre { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 4px; } .semana-dia-num { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; } .semana-col-hoy .semana-dia-num { color: var(--plum); } .semana-dia-link:hover .semana-dia-num { color: var(--plum); } .semana-dia-count { font-size: 11px; color: var(--ink-soft); margin-top: 5px; } .semana-dia-libre { color: var(--line); } .semana-col-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; min-height: 120px; } .semana-vacio { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--line); padding: 24px 0; } .semana-cita { display: block; text-decoration: none; padding: 7px 9px; border-radius: 7px; border-left: 3px solid var(--line); background: var(--bg); transition: box-shadow .12s ease; } .semana-cita:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); } .semana-cita-agendada { border-left-color: var(--ink-soft); } .semana-cita-confirmada { border-left-color: var(--gold); background: var(--gold-soft); } .semana-cita-en-curso { border-left-color: var(--green); background: var(--green-soft); } .semana-cita-atendida { border-left-color: var(--plum); background: var(--plum-soft); } .semana-hora { font-size: 10px; font-weight: 700; color: var(--ink-soft); display: block; margin-bottom: 2px; letter-spacing: .03em; } .semana-nombre { font-size: 12px; font-weight: 600; color: var(--ink); display: block; line-height: 1.3; } .semana-det { font-size: 11px; color: var(--ink-soft); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .semana-est { font-size: 10px; color: var(--ink-soft); display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; } .semana-col-footer { padding: 8px; border-top: 1px solid var(--line); } .semana-nueva-link { display: block; text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 6px; border-radius: 6px; transition: background .12s, color .12s; } .semana-nueva-link:hover { background: var(--plum-soft); color: var(--plum); } /* ═══════════════════════════════════════════════════════════════ 1. MODO OSCURO Variables: tokens reasignados para tema cálido-oscuro. Colores hardcodeados: sobreescritos con clase .dark en . ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #141A14; --surface: #1C241C; --ink: #EDE9E0; --ink-soft: #9AA595; --line: #2A342A; --plum: #A7B29D; --plum-soft: #25302A; --gold: #C9A24B; --gold-soft: #2A1E0A; --green: #52A874; --green-soft: #0A1E12; --red: #D05550; --text-secondary: #9AA595; --bg-alt: #202A20; /* fallback para .edo-section; #f4f6fa en claro */ } /* ── Bug: toast usa --ink como fondo; en oscuro --ink es claro ── */ /* Regla amplia: cubre toasts standalone (ej. gastos_reales.html) Y los del stack */ .dark .toast { background: #2C2018; color: var(--ink); } .dark .toast-stack .toast { box-shadow: 0 8px 30px rgba(0,0,0,.45); } /* ── badge-red: fondo hardcodeado claro ── */ .dark .badge-red { background: #2D1015; color: var(--red); } .dark .badge-critico { background:#2D1015; color:#E05550; } .dark .badge-urgente { background:#2D2005; color:#CFA04E; } .dark .badge-proximo { background:#0D1E2D; color:#5B9BBD; } .dark .badge-ok-status { background:#0A1E10; color:#52A874; } .dark .badge.badge-critico { font-weight:700; } .dark .badge.badge-urgente { font-weight:700; } .dark .alerta-verde { background:#0A1E12; } .dark .alerta-oro { background:#2A1E0A; } .dark .alerta-roja { background:#2D1015; } .dark .alerta-neutra { background:var(--surface); } .dark .year-pill { background:#2E2218; color:#9C8878; } .dark .year-pill:hover { background:#3A2830; } .dark .semana-col-hoy { background:#22182A; } .dark .semana-col-hoy .semana-col-header { background:var(--plum-soft); } .dark .rep-kpi-critico .rep-kpi-value { color:#E05550; } .dark .rep-kpi-urgente .rep-kpi-value { color:#CFA04E; } .dark .rep-kpi-proximo .rep-kpi-value { color:#5B9BBD; } .dark .modal-overlay { background:rgba(0,0,0,.65); } /* ═══════════════════════════════════════════════════════════════ 2. TOASTS — apilado y auto-desvanecimiento ═══════════════════════════════════════════════════════════════ */ .toast-stack { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column-reverse; gap: 10px; align-items: center; pointer-events: none; width: max-content; max-width: min(90vw, 480px); } .toast-stack .toast { position: static; transform: none; width: 100%; pointer-events: auto; animation: toast-in .28s cubic-bezier(.22,.68,0,1.2) forwards; } .toast-stack .toast.toast-fade { animation: toast-out .3s ease forwards; } @keyframes toast-in { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(8px); } } /* ═══════════════════════════════════════════════════════════════ 3. SIDEBAR COLAPSABLE ═══════════════════════════════════════════════════════════════ */ .sidebar { transition: width .22s ease, padding .22s ease, border-color .22s ease; } @media (min-width: 781px) { html.sb-collapsed .sidebar { width: 0; min-width: 0; padding: 0; overflow: hidden; border-right-color: transparent; } } .sb-toggle { display: none; background: transparent; border: none; color: var(--ink-soft); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1; transition: color .15s, background .15s; flex-shrink: 0; } .sb-toggle:hover { background: var(--line); color: var(--plum); } @media (min-width: 781px) { .sb-toggle { display: inline-flex; align-items: center; } } .theme-toggle { font-size: 15px; padding: 4px 11px; } /* Transición suave al cambiar de tema */ .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .35s ease, color .25s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ═══════════════════════════════════════════════════════════════ 4. RESPONSIVE — TABLET (781 px – 1040 px) ═══════════════════════════════════════════════════════════════ */ @media (min-width: 781px) and (max-width: 1040px) { .sidebar { width: 200px; padding: 22px 12px; } .navlink { padding: 10px 10px; font-size: 13.5px; } .main { padding: 24px 20px; } .pos-grid { gap: 16px; } .pos-grid > :last-child { min-width: 300px; } .kpi-card { padding: 12px 14px; } } /* ── Clase utilitaria para cajas de nota/aviso (reemplaza inline styles en templates) ── */ .info-callout { padding: 12px 16px; border-left: 4px solid var(--plum); border-radius: 6px; font-size: .82rem; background: var(--plum-soft); color: var(--ink); line-height: 1.55; margin-top: 16px; max-width: 700px; } .info-callout.callout-gold { border-left-color: var(--gold); background: var(--gold-soft); } .info-callout.callout-green { border-left-color: var(--green); background: var(--green-soft); } .info-callout.callout-red { border-left-color: var(--red); background: #FDECEA; color: var(--ink); } [data-theme="dark"] .info-callout.callout-red { background: #2D1015 !important; } /* ══════════════════════════════════════════════════════════════════════════ CORRECCIONES MODO OSCURO — colores hardcodeados en templates Los inline-styles tienen alta especificidad; !important es necesario aquí. ══════════════════════════════════════════════════════════════════════════ */ /* ── Textos oscuros que desaparecen sobre fondo oscuro ── */ [data-theme="dark"] [style*="color:#1565c0"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#1a6496"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#333"] { color: var(--ink) !important; } [data-theme="dark"] [style*="color:#555"] { color: var(--ink-soft) !important; } [data-theme="dark"] [style*="color:#4a4a6a"] { color: var(--ink-soft) !important; } [data-theme="dark"] [style*="color:#4c1d95"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#3730a3"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#4338ca"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#1a3a7a"] { color: var(--plum) !important; } [data-theme="dark"] [style*="color:#6366f1"] { color: var(--plum) !important; } /* Dorados/marrones oscuros */ [data-theme="dark"] [style*="color:#7a5800"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#6b5a00"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#854d0e"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#92400e"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#b07a00"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#c2410c"] { color: var(--gold) !important; } /* Verdes oscuros */ [data-theme="dark"] [style*="color:#155724"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#166534"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#047857"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#059669"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#15803d"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#16a34a"] { color: var(--green) !important; } [data-theme="dark"] [style*="color:#2a7a2a"] { color: var(--green) !important; } /* Rojos oscuros */ [data-theme="dark"] [style*="color:#991b1b"] { color: var(--red) !important; } [data-theme="dark"] [style*="color:#b91c1c"] { color: var(--red) !important; } [data-theme="dark"] [style*="color:#d32f2f"] { color: var(--red) !important; } /* ── Fondos claros que quedan como manchas blancas en modo oscuro ── */ [data-theme="dark"] [style*="background:#f0f4ff"] { background: var(--plum-soft) !important; } [data-theme="dark"] [style*="background:#f0f0ff"] { background: var(--plum-soft) !important; } [data-theme="dark"] [style*="background:#e8f0fe"] { background: var(--plum-soft) !important; } [data-theme="dark"] [style*="background:#ede9fe"] { background: var(--plum-soft) !important; } [data-theme="dark"] [style*="background:#fff8e1"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#fff3cd"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#fffbeb"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#fff7ed"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#fef9c3"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#dcfce7"] { background: var(--green-soft) !important; } [data-theme="dark"] [style*="background:#d1fae5"] { background: var(--green-soft) !important; } [data-theme="dark"] [style*="background:#f0fdf4"] { background: var(--green-soft) !important; } [data-theme="dark"] [style*="background:#fee2e2"] { background: #2D1015 !important; } [data-theme="dark"] [style*="background:#fef2f2"] { background: #2D1015 !important; } /* ── Bordes de color claro (usados como indicadores de mes/estado) ── */ [data-theme="dark"] [style*="border-color:#bbf7d0"] { border-color: var(--green) !important; } [data-theme="dark"] [style*="border-color:#d1fae5"] { border-color: var(--green) !important; } [data-theme="dark"] [style*="border-color:#fecaca"] { border-color: var(--red) !important; } [data-theme="dark"] [style*="border-color:#fde68a"] { border-color: var(--gold) !important; } [data-theme="dark"] [style*="border-color:#c7d2fe"] { border-color: var(--plum) !important; } /* ── Bordes de tabla y divisores ── */ [data-theme="dark"] [style*="border-top:2px solid #e5e7eb"] { border-top-color: var(--line) !important; } [data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"] { border-bottom-color: var(--line) !important; } /* ── Grises medios que tienen bajo contraste en oscuro ── */ [data-theme="dark"] [style*="color:#666"] { color: var(--ink-soft) !important; } [data-theme="dark"] [style*="color:#888"] { color: var(--ink-soft) !important; } [data-theme="dark"] [style*="color:#856404"] { color: var(--gold) !important; } [data-theme="dark"] [style*="color:#92400e"] { color: var(--gold) !important; } /* ── Fondos gris-claros adicionales ── */ [data-theme="dark"] [style*="background:#f0f0f0"] { background: var(--surface) !important; } [data-theme="dark"] [style*="background:#f5f5f5"] { background: var(--surface) !important; } [data-theme="dark"] [style*="background:#fffbf0"] { background: var(--gold-soft) !important; } [data-theme="dark"] [style*="background:#f9fafb"] { background: var(--surface) !important; } /* ── Clases CSS en bloques