/* ═══════════════════════════════════════════════════════════ IKAL SPA — Admin Panel CSS ═══════════════════════════════════════════════════════════ */ :root { --teal-dark: #0A4F51; --teal-mid: #107b7e; --teal-deep: #042324; --gold: #CBB26A; --gold-light: #d8c690; --bg-admin: #f0f4f5; --bg-card: #ffffff; --sidebar-w: 260px; --topbar-h: 60px; --text-dark: #1a1a1a; --text-mid: #4a4a4a; --text-light: #6b7280; --border: rgba(10,79,81,.1); --shadow-sm: 0 1px 4px rgba(10,79,81,.08); --shadow: 0 4px 12px rgba(10,79,81,.1); --tr: 0.3s ease; --radius: 8px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Jost', system-ui, sans-serif; background: var(--bg-admin); color: var(--text-dark); } a { color: inherit; text-decoration: none; } h1,h2,h3 { font-family: 'Jost', system-ui, sans-serif; font-weight: 500; } input, select, textarea, button { font-family: inherit; } /* ── Layout ──────────────────────────────────────────────── */ .admin-body { display: flex; min-height: 100vh; overflow: hidden; } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); height: 100vh; position: fixed; top: 0; left: 0; z-index: 200; background: var(--teal-deep); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--tr); overflow: hidden; } .sidebar.open { transform: translateX(0); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(203,178,106,.1); } .sidebar-logo { display: flex; flex-direction: column; } .logo-text { font-size: 1.5rem; font-weight: 300; color: var(--gold); letter-spacing: .1em; max-width: calc(var(--sidebar-w) - 3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logo-sub { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(203,178,106,.6); } .sidebar-close { background: none; border: none; color: rgba(203,178,106,.5); font-size: 1.5rem; cursor: pointer; padding: .2rem; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; } .nav-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; font-size: .83rem; font-weight: 400; color: rgba(216,198,144,.65); transition: all var(--tr); cursor: pointer; } .nav-item:hover { background: rgba(203,178,106,.08); color: var(--gold-light); } .nav-item.active { background: rgba(203,178,106,.12); color: var(--gold); border-right: 2px solid var(--gold); } .nav-icon { font-size: 1rem; width: 20px; text-align: center; } .nav-section { padding: .8rem 1.5rem .3rem; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(203,178,106,.35); } .sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(203,178,106,.1); display: flex; align-items: center; justify-content: space-between; } .sidebar-user { display: flex; align-items: center; gap: .75rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-mid); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; color: var(--gold-light); } .user-name { font-size: .8rem; font-weight: 500; color: var(--gold-light); } .user-role { font-size: .65rem; color: rgba(203,178,106,.4); } .btn-logout { background: none; border: none; color: rgba(203,178,106,.4); font-size: 1.1rem; cursor: pointer; transition: color var(--tr); } .btn-logout:hover { color: #e63946; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; } /* ── Main content ────────────────────────────────────────── */ .admin-main { flex: 1; margin-left: 0; transition: margin-left var(--tr); min-height: 100vh; display: flex; flex-direction: column; } .admin-main.sidebar-open { margin-left: var(--sidebar-w); } /* ── Topbar ──────────────────────────────────────────────── */ .admin-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .5rem; } .topbar-toggle span { display: block; width: 20px; height: 2px; background: var(--text-mid); border-radius: 2px; } .topbar-title { flex: 1; font-size: 1rem; font-weight: 500; color: var(--teal-dark); } .topbar-right { display: flex; align-items: center; gap: .75rem; } .topbar-btn { padding: .45rem .7rem; background: var(--bg-admin); border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; cursor: pointer; transition: all var(--tr); } .topbar-btn:hover { border-color: var(--teal-mid); } .topbar-btn-primary { padding: .45rem 1rem; background: var(--teal-dark); color: white; border: none; border-radius: 6px; font-size: .8rem; font-weight: 500; cursor: pointer; transition: all var(--tr); } .topbar-btn-primary:hover { background: var(--teal-mid); } /* ── Content area ────────────────────────────────────────── */ /* `min-width: 0` (2026-09-11, a pedido expreso — reporte Cumplimiento de Horarios se salía del borde sin scroll horizontal, ni escondiendo el menú lateral): por default, un hijo flex NO se encoge por debajo del ancho de su propio contenido ("min-width: auto" implícito). Una tabla ancha (ej. reportes de muchas columnas, que ya traen su propio `overflow-x:auto` en templates/admin/reports/partials/tabla.html) hacía crecer a `.admin-content` más allá del viewport en vez de respetar el ancho disponible y dejar que la tabla mostrara SU PROPIO scroll interno — el layout completo se desbordaba sin ningún scrollbar visible, porque `.admin-body` recorta con `overflow: hidden`. No cambia nada visible en pantallas normales: solo permite que este contenedor se encoja cuando hace falta, activando el scroll horizontal que el contenido ancho ya tenía programado. */ .admin-content { flex: 1; min-width: 0; padding: 1.5rem; overflow-y: auto; } /* ── Messages ────────────────────────────────────────────── */ .messages-container { padding: 0 1.5rem; } .message { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-radius: 6px; font-size: .85rem; margin-bottom: .5rem; } .message-success { background: #d1fae5; color: #065f46; } .message-error, .message-danger { background: #fee2e2; color: #991b1b; } .message-warning { background: #fef3c7; color: #92400e; } .message-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: .6; } /* ── KPI Cards ───────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.5rem; } .kpi-card { background: var(--bg-card); border-radius: var(--radius); padding: 1.2rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .8rem; } .kpi-card.kpi-alert { border-color: #fca5a5; background: #fff5f5; } .kpi-card.kpi-warning { border-color: #fcd34d; background: #fffbeb; } .kpi-icon { font-size: 1.8rem; } .kpi-value { font-size: 2rem; font-weight: 600; color: var(--teal-dark); line-height: 1; } .kpi-label { font-size: .75rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; } .kpi-detail { display: flex; flex-wrap: wrap; gap: .4rem; } /* ── Badges ──────────────────────────────────────────────── */ .badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .7rem; font-weight: 500; } .badge-pendiente { background: #fef3c7; color: #92400e; } .badge-confirmada { background: #d1fae5; color: #065f46; } .badge-en_proceso { background: #dbeafe; color: #1e40af; } .badge-finalizada { background: #f3f4f6; color: #374151; } .badge-pagada { background: #ede9fe; color: #5b21b6; } .badge-cancelada { background: #fee2e2; color: #991b1b; } .badge-no_show { background: #fce7f3; color: #9d174d; } .badge-abierta { background: #d1fae5; color: #065f46; } .badge-cerrada { background: #f3f4f6; color: #374151; } .badge-green { background: #d1fae5; color: #065f46; } .badge-yellow { background: #fef3c7; color: #92400e; } .badge-red { background: #fee2e2; color: #991b1b; } .badge-teal { background: rgba(10,79,81,.1); color: var(--teal-dark); } .badge-blue { background: #dbeafe; color: #1e40af; } /* ── Cards ───────────────────────────────────────────────── */ .dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; } .dashboard-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); } .card-header h2 { font-size: .9rem; font-weight: 500; color: var(--text-dark); } .card-link { font-size: .78rem; color: var(--teal-mid); } .card-actions { display: flex; gap: .5rem; } .mt-4 { margin-top: 1rem; } /* ── Agenda ──────────────────────────────────────────────── */ .agenda-list { padding: .5rem; max-height: 420px; overflow-y: auto; } .agenda-item { display: flex; gap: 1rem; align-items: flex-start; padding: .75rem; border-radius: 6px; cursor: pointer; transition: background var(--tr); border-left: 3px solid transparent; margin-bottom: .4rem; } .agenda-item:hover { background: rgba(10,79,81,.04); } .agenda-pendiente { border-left-color: #f59e0b; } .agenda-confirmada { border-left-color: #10b981; } .agenda-en_proceso { border-left-color: #3b82f6; } .agenda-finalizada { border-left-color: #9ca3af; } .agenda-cancelada { border-left-color: #ef4444; opacity: .6; } .agenda-hora { font-size: .8rem; font-weight: 600; color: var(--teal-dark); min-width: 45px; } .agenda-info { flex: 1; } .agenda-cliente { font-size: .85rem; font-weight: 500; } .agenda-servicio { font-size: .78rem; color: var(--text-light); } .agenda-empleado { font-size: .72rem; color: var(--text-light); } .agenda-estado { flex-shrink: 0; } .empty-agenda { text-align: center; padding: 2rem; color: var(--text-light); font-size: .85rem; } /* ── Próximas ────────────────────────────────────────────── */ .proximas-list { padding: .5rem; } .proxima-item { display: flex; align-items: center; gap: 1rem; padding: .65rem; border-radius: 6px; transition: background var(--tr); margin-bottom: .3rem; } .proxima-item:hover { background: rgba(10,79,81,.04); } .proxima-fecha { width: 44px; text-align: center; } .prox-dia { display: block; font-size: 1.3rem; font-weight: 600; color: var(--teal-dark); line-height: 1; } .prox-mes { display: block; font-size: .65rem; text-transform: uppercase; color: var(--text-light); } .proxima-info { flex: 1; } .proxima-cliente { font-size: .85rem; font-weight: 500; } .proxima-svc { font-size: .75rem; color: var(--text-light); } .alertas-list { padding: .5rem; } .alerta-item { display: flex; align-items: center; justify-content: space-between; padding: .5rem; border-bottom: 1px solid var(--border); font-size: .83rem; } /* ── Data tables ─────────────────────────────────────────── */ .list-page { } .list-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .search-box { position: relative; flex: 1; min-width: 200px; } .search-input { width: 100%; padding: .6rem 1rem .6rem 2.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); font-size: .85rem; color: var(--text-dark); outline: none; transition: border-color var(--tr); } .search-input:focus { border-color: var(--teal-mid); } .search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: .9rem; } .filter-group { display: flex; gap: .6rem; } .select-filter, .input-filter { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); font-size: .82rem; color: var(--text-dark); outline: none; cursor: pointer; } .select-filter:focus, .input-filter:focus { border-color: var(--teal-mid); } .table-container { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background: rgba(10,79,81,.04); } .data-table th { padding: .75rem 1rem; text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: .75rem 1rem; border-bottom: 1px solid rgba(10,79,81,.05); font-size: .83rem; vertical-align: middle; } .data-table tr:hover td { background: rgba(10,79,81,.02); } .td-main { font-weight: 500; } .td-sub { font-size: .75rem; color: var(--text-light); } .td-folio { font-family: monospace; font-size: .8rem; color: var(--teal-mid); } .td-actions { display: flex; gap: .4rem; } .empty-table { text-align: center; padding: 3rem; color: var(--text-light); } .btn-icon { width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; transition: all var(--tr); } .btn-icon:hover { border-color: var(--teal-mid); } .btn-icon.btn-success { border-color: #10b981; color: #10b981; } .btn-icon.btn-danger { border-color: #ef4444; color: #ef4444; } .btn-sm { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); font-size: .75rem; cursor: pointer; transition: all var(--tr); } .btn-sm:hover { border-color: var(--teal-mid); } .btn-sm-primary { padding: .35rem .8rem; background: var(--teal-dark); color: white; border: none; border-radius: 4px; font-size: .75rem; cursor: pointer; transition: background var(--tr); } .btn-sm-primary:hover { background: var(--teal-mid); } .btn-primary { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.2rem; background: var(--teal-dark); color: white; border: none; border-radius: 6px; font-size: .82rem; font-weight: 500; cursor: pointer; transition: all var(--tr); } .btn-primary:hover { background: var(--teal-mid); transform: translateY(-1px); } /* ── Paginación ──────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; border-top: 1px solid var(--border); font-size: .82rem; } .page-btn { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; transition: all var(--tr); } .page-btn:hover { border-color: var(--teal-mid); } .page-info { color: var(--text-light); } /* ── Modal ───────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(4,35,36,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-box { background: var(--bg-card); border-radius: var(--radius); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); z-index: 1; } /* ── POS ─────────────────────────────────────────────────── */ .pos-container { display: grid; grid-template-columns: 1fr 360px; gap: 1rem; height: calc(100vh - var(--topbar-h) - 3rem); } .pos-catalog { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .pos-search { padding: .75rem; border-bottom: 1px solid var(--border); } .pos-tabs { display: flex; border-bottom: 1px solid var(--border); } .pos-tab { flex: 1; padding: .7rem; border: none; background: none; cursor: pointer; font-size: .82rem; font-weight: 500; color: var(--text-light); transition: all var(--tr); } .pos-tab.active { color: var(--teal-dark); border-bottom: 2px solid var(--teal-dark); } .pos-items-grid { flex: 1; overflow-y: auto; padding: .75rem; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: .5rem; align-content: start; } /* .pos-item-wrap envuelve cada tarjeta de servicio junto con el botón 🎁 de Tarjetas de Regalo (2026-08-31) — display:flex + .pos-item con flex:1 fuerza a que el botón (hijo) ocupe EXACTAMENTE la misma caja que el wrap (grid item), para que el 🎁, posicionado absoluto respecto al wrap, quede siempre alineado igual sin importar si el nombre del servicio ocupa una o dos líneas (antes, con el wrap sin display:flex, el grid podía estirar el wrap más alto que el botón en filas con nombres largos, dejando espacio extra que hacía ver el 🎁 recortado/desalineado en unas tarjetas sí y en otras no). */ .pos-item-wrap { display: flex; } .pos-item { display: flex; flex: 1; flex-direction: column; gap: .25rem; padding: .75rem; background: var(--bg-admin); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-align: left; transition: all var(--tr); } .pos-item:hover { border-color: var(--teal-mid); background: rgba(10,79,81,.05); } .pos-item-icon { font-size: 1.4rem; } .pos-item-name { font-size: .78rem; font-weight: 500; line-height: 1.3; } .pos-item-price { font-size: .85rem; font-weight: 600; color: var(--teal-dark); } .pos-item-dur, .pos-item-stock { font-size: .7rem; color: var(--text-light); } .stock-low { color: #ef4444; } .pos-ticket { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .ticket-header { padding: .75rem 1rem; border-bottom: 1px solid var(--border); } .ticket-header h2 { font-size: .9rem; margin-bottom: .5rem; } .input-cliente { width: 100%; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 4px; font-size: .8rem; } .suggestions-dropdown { position: relative; z-index: 10; } .ticket-items { flex: 1; overflow-y: auto; padding: .5rem; } .ticket-empty { text-align: center; padding: 2rem; color: var(--text-light); font-size: .83rem; } .ticket-item { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-bottom: 1px solid var(--border); } .ti-info { flex: 1; } .ti-nombre { font-size: .8rem; font-weight: 500; } .ti-precio { font-size: .75rem; color: var(--text-light); } .ti-qty { display: flex; align-items: center; gap: .4rem; } .qty-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-admin); cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; } .ti-subtotal { font-size: .82rem; font-weight: 600; min-width: 55px; text-align: right; } .ti-del { width: 22px; height: 22px; border: none; background: none; color: #ef4444; cursor: pointer; font-size: .9rem; } .ticket-totals { padding: .75rem 1rem; border-top: 1px solid var(--border); } .total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; font-size: .83rem; } .total-final { font-weight: 600; font-size: 1rem; margin-top: .5rem; padding-top: .5rem; border-top: 2px solid var(--teal-dark); } .total-amount { color: var(--teal-dark); font-size: 1.2rem; } .input-total { width: 60px; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .82rem; text-align: right; } .ticket-pago { padding: .75rem 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; } .select-pago, .input-pago { width: 100%; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: 4px; font-size: .82rem; } .cambio-row { font-size: .82rem; color: #10b981; font-weight: 500; } .btn-cobrar { width: 100%; margin: .75rem 1rem; width: calc(100% - 2rem); padding: .9rem; background: var(--teal-dark); color: white; border: none; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all var(--tr); letter-spacing: .05em; } .btn-cobrar:hover:not(:disabled) { background: var(--teal-mid); } .btn-cobrar:disabled { background: var(--text-light); cursor: not-allowed; } .caja-info { padding: .5rem 1rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-light); } /* ── Login ───────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-dark) 100%); padding: 1rem; } .login-card { background: white; border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .login-logo { text-align: center; margin-bottom: 1.5rem; } .login-logo .logo-text { font-size: 2.5rem; font-weight: 300; color: var(--teal-dark); letter-spacing: .1em; } .login-logo .logo-sub { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-light); } .login-title { font-size: 1.2rem; font-weight: 500; color: var(--text-dark); margin-bottom: 1.5rem; text-align: center; } .login-error { background: #fee2e2; color: #991b1b; padding: .75rem; border-radius: 6px; font-size: .83rem; margin-bottom: 1rem; text-align: center; } .form-input { width: 100%; padding: .75rem 1rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: .9rem; color: var(--text-dark); background: white; outline: none; transition: border-color var(--tr); margin-bottom: 1rem; } .form-input:focus { border-color: var(--teal-mid); box-shadow: 0 0 0 3px rgba(16,123,126,.1); } .fgroup label { display: block; font-size: .75rem; font-weight: 500; color: var(--text-mid); margin-bottom: .35rem; } .btn-login { width: 100%; padding: .85rem; background: var(--teal-dark); color: white; border: none; border-radius: 6px; font-size: .9rem; font-weight: 500; cursor: pointer; transition: all var(--tr); letter-spacing: .05em; } .btn-login:hover:not(:disabled) { background: var(--teal-mid); } .login-footer { text-align: center; margin-top: 1.5rem; font-size: .8rem; color: var(--text-light); } .login-footer a { color: var(--teal-mid); } /* ── Forms ───────────────────────────────────────────────── */ .form-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: 1.5rem; max-width: 700px; } .form-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; color: var(--text-dark); } .fgroup { margin-bottom: 1.2rem; } .fgroup label { display: block; font-size: .75rem; font-weight: 500; color: var(--text-mid); margin-bottom: .35rem; } .form-input, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], select, textarea { width: 100%; padding: .65rem .9rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: .85rem; color: var(--text-dark); background: white; outline: none; transition: border-color var(--tr); } input:focus, select:focus, textarea:focus, .form-input:focus { border-color: var(--teal-mid); box-shadow: 0 0 0 3px rgba(16,123,126,.08); } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } /* ── Caja ────────────────────────────────────────────────── */ .caja-resumen { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; } .caja-stat { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: 1.2rem; text-align: center; } .caja-stat-value { font-size: 1.8rem; font-weight: 600; color: var(--teal-dark); } .caja-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-top: .3rem; } .caja-stat.diferencia-neg .caja-stat-value { color: #ef4444; } .caja-stat.diferencia-pos .caja-stat-value { color: #10b981; } /* ── Responsive ──────────────────────────────────────────── */ @media(max-width:1024px) { .sidebar { width: var(--sidebar-w); } .admin-main.sidebar-open { margin-left: 0; } .kpi-grid { grid-template-columns: repeat(2,1fr); } .dashboard-grid { grid-template-columns: 1fr; } .pos-container { grid-template-columns: 1fr; height: auto; } /* Bug reportado 2026-08-31: en tablet, .pos-ticket heredaba overflow:hidden de su regla base — con max-height:50vh, si el contenido (items + totales + métodos de pago + botón Cobrar + info de caja) no cabía, el botón Cobrar quedaba recortado y SIN forma de hacer scroll para alcanzarlo. overflow-y:auto permite desplazarse dentro del panel completo. */ .pos-ticket { max-height: 50vh; overflow-y: auto; } } @media(max-width:600px) { .admin-content { padding: 1rem; } /* En celular el catálogo de arriba ya ocupa más espacio relativo — se le da más margen al panel del ticket para que el botón Cobrar no quede tan apretado (sigue siendo desplazable de todas formas, ver arriba). */ .pos-ticket { max-height: 65vh; } .kpi-grid { grid-template-columns: repeat(2,1fr); } .frow { grid-template-columns: 1fr; } .list-toolbar { flex-direction: column; align-items: stretch; } .data-table { font-size: .78rem; } .data-table th:nth-child(n+4), .data-table td:nth-child(n+4) { display: none; } } /* ── Empty states ────────────────────────────────────────── */ .empty-text { text-align: center; color: var(--text-light); padding: 1.5rem; font-size: .83rem; } /* ── Inventario ──────────────────────────────────────────── */ .stock-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 4px; font-size: .75rem; font-weight: 500; } .stock-ok { background: #d1fae5; color: #065f46; } .stock-low-badge { background: #fee2e2; color: #991b1b; } /* ── Tablero de Cabinas (2026-09-02) ───────────────────────── Grilla: 1 columna de horas (gutter) + 1 columna por cabina activa. Cada columna de cabina es un contenedor relativo de alto fijo (el total del horario del día); cada cita se dibuja como un bloque absoluto posicionado por top/height ya calculados en la vista (ver apps/cabinas/views.py::_tablero_posicion_bloque) — evita tener que armar en el template una fila por cada franja de 30 min × cabina. */ .tablero-cabinas { width: 100%; } .tablero-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .tablero-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .tablero-fecha-actual { color: var(--text-mid); font-size: .9rem; text-transform: capitalize; } .tablero-vacio { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; color: var(--text-light); display: flex; flex-direction: column; gap: .8rem; align-items: center; } .tablero-aviso-sin-cabina { background: #fef3c7; color: #92400e; padding: .6rem .9rem; border-radius: 6px; font-size: .8rem; margin-bottom: .8rem; } .tablero-aviso-sin-cabina a { text-decoration: underline; font-weight: 600; } .tablero-grid { display: grid; align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; padding: 0 0 1rem; } .tablero-esquina { position: sticky; top: 0; left: 0; z-index: 3; background: var(--bg-card); } .tablero-col-header { position: sticky; top: 0; z-index: 2; background: var(--teal-dark); color: white; padding: .6rem .5rem; font-size: .78rem; font-weight: 600; text-align: center; border-left: 1px solid rgba(255,255,255,.15); } .tablero-horas { position: sticky; left: 0; z-index: 1; background: var(--bg-card); border-right: 1px solid var(--border); } .tablero-hora-marca { display: flex; align-items: flex-start; justify-content: center; font-size: .68rem; color: var(--text-light); padding-top: .2rem; border-top: 1px dashed var(--border); } .tablero-columna { position: relative; border-left: 1px solid var(--border); /* Líneas horizontales cada franja, para que las zonas libres se vean claramente divididas por horario aunque no tengan ningún bloque. */ background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), var(--border) 100%); } .tablero-bloque { position: absolute; left: 3px; right: 3px; overflow: hidden; border-radius: 5px; padding: .3rem .4rem; font-size: .7rem; line-height: 1.25; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .15rem; } .tablero-bloque-hora { font-weight: 700; font-size: .68rem; } .tablero-bloque-servicio { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tablero-bloque-cliente { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; } /* 2026-09-10 (4): bloques cortos (ver TABLERO_UMBRAL_COMPACTO_PX en apps/cabinas/views.py) fusionan hora+servicio+cliente en una sola línea truncada (tooltip con el texto completo) para dejarle espacio al