:root { --bg:#f5f5f7; --card:#ffffff; --line:#e3e3e6; --line-soft:#efeff1; --accent:#00a99d; --accent-2:#33c9bd; --accent-soft:#e2f6f4; --text:#1d1d1f; --muted:#86868b; --wa:#1faa5a; } /* ===== Temas por cliente (se activa con ) ===== Cada tema solo redefine las variables de color; el resto de la UI hereda. WhatsApp (--wa) queda verde siempre (color de marca de WhatsApp). */ body[data-tema="rojo-negro"] { --accent:#e01e2b; /* rojo de acento (botones, activos, links) */ --accent-2:#ff4d57; /* variante clara para degradados */ --accent-soft:#fdeaeb; /* rojo muy claro para fondos tenues */ --text:#141414; /* negro para textos */ --bg:#f4f4f5; } /* Estilo Liqui Moly: azul intenso profesional. */ body[data-tema="azul-liqui"] { --accent:#0a4ea3; /* azul royal intenso (botones, activos, links) */ --accent-2:#2f74d0; /* variante clara para degradados */ --accent-soft:#e7effb; /* azul muy claro para fondos tenues */ --text:#15202b; /* azul-grafito para textos */ --bg:#f2f5f9; } * { box-sizing: border-box; } body { margin:0; min-height:100vh; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); display:flex; justify-content:center; align-items:flex-start; padding:40px 20px; -webkit-font-smoothing:antialiased; } .wrap { width:100%; max-width:500px; } /* Header de marca como ribbon compacto (1-2 líneas, fondo propio) */ .ribbon { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding:10px 16px; border-radius:14px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-soft); box-shadow:0 1px 3px rgba(0,0,0,.05), 0 6px 18px rgba(30,40,80,.05); } .brand { display:flex; align-items:center; gap:9px; flex:none; cursor:pointer; user-select:none; } .logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,169,157,.35); flex:none; } .logo svg { width:18px; height:18px; } h1 { font-size:1.15rem; font-weight:700; letter-spacing:-.02em; margin:0; } h1 .flow { color:var(--accent); } /* Datos del negocio a la derecha, alineados a la derecha, máx 2 líneas */ .biz { margin:0 0 0 auto; text-align:right; min-width:0; } .biz-nombre { display:block; color:var(--text); font-weight:600; font-size:.95rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .biz-dir { display:block; color:var(--muted); font-size:.78rem; margin-top:1px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .biz-link { color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none; } .biz-link:hover { text-decoration:underline; } /* Separador visual sutil entre marca y negocio */ .ribbon .brand::after { content:""; width:1px; height:22px; background:var(--line-soft); margin-left:5px; } /* Tarjeta genérica */ .card { background:var(--card); border:1px solid var(--line-soft); border-radius:20px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); } /* Home: tarjetas de navegación en grilla. Móvil = 2 columnas (3 filas x2). */ .home-cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; } /* Cerrar sesión (móvil): link discreto debajo de las tarjetas. */ .logout-link { display:block; width:100%; margin:20px auto 0; padding:12px; border:1px solid var(--line-soft); border-radius:12px; background:none; color:#ff2d55; font-size:.9rem; font-weight:600; cursor:pointer; } .logout-link:hover { background:#fff0f2; } /* Desktop: 3 columnas (2 filas x3). Ensanchamos el contenedor SOLO en el home para que las 3 tarjetas por fila queden cómodas. */ @media (min-width:768px) { .wrap.home-activa { max-width:820px; } .wrap.home-activa .home-cards { grid-template-columns:repeat(3, 1fr); } } .navcard { --c:var(--accent); --c-soft:var(--accent-soft); display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; width:100%; background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:20px 18px; cursor:pointer; transition:transform .08s, box-shadow .18s, border-color .15s; box-shadow:0 1px 3px rgba(0,0,0,.04); min-height:158px; position:relative; overflow:hidden; text-decoration:none; color:inherit; font:inherit; } /* Tinte de color muy sutil en el fondo (de arriba a abajo) */ .navcard::before { content:""; position:absolute; inset:0; background:var(--c-soft); opacity:.5; z-index:0; pointer-events:none; } .navcard > * { position:relative; z-index:1; } .navcard:hover { border-color:var(--c); box-shadow:0 8px 22px rgba(0,0,0,.10); box-shadow:0 8px 22px color-mix(in srgb, var(--c) 22%, transparent); transform:translateY(-2px); } .navcard:active { transform:scale(.99); } .navcard .ico { width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--c); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.16); box-shadow:0 4px 12px color-mix(in srgb, var(--c) 38%, transparent); } .navcard .ico svg { width:24px; height:24px; } .navcard .txt h3 { margin:0 0 4px; font-size:1.05rem; font-weight:600; } .navcard .txt p { margin:0; font-size:.82rem; color:var(--muted); line-height:1.35; } /* Paleta por tarjeta (acorde a la marca teal, con acompañantes suaves) */ .navcard.c-teal { --c:#00a99d; --c-soft:#e2f6f4; } .navcard.c-blue { --c:#3a86ff; --c-soft:#e7f0ff; } .navcard.c-violet { --c:#8b5cf6; --c-soft:#f0eaff; } .navcard.c-amber { --c:#f59e0b; --c-soft:#fff4e0; } .navcard.c-rose { --c:#f43f6b; --c-soft:#ffe8ee; } .navcard.c-green { --c:#22b573; --c-soft:#e3f7ec; } /* ===== Reportes ===== */ .kpi-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:14px; } .kpi { background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,.04); } .kpi .v { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; color:var(--text); line-height:1.1; } .kpi .v small { font-size:1rem; font-weight:600; color:var(--muted); } .kpi .l { font-size:.8rem; color:var(--muted); margin-top:4px; } .kpi.acc-teal .v { color:#00a99d; } .kpi.acc-blue .v { color:#3a86ff; } .kpi.acc-violet .v { color:#8b5cf6; } .kpi.acc-green .v { color:#22b573; } .sec-divider { height:1px; background:var(--line-soft); margin:30px 0 22px; } /* Ajustes: cada grupo es su propio card, con el fondo de la pantalla visible entre secciones para que se lean como bloques separados. */ #view-ajustes > .card { background:none; border:none; box-shadow:none; padding:0; } #view-ajustes .sec-divider { display:none; } /* ya no separan: lo hace el gap */ #view-ajustes .ajustes-grupo { background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:22px 24px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.04); } .ajustes-grupo > .rep-sec:first-child { margin-top:0; } .ajustes-grupo > label:first-of-type { margin-top:10px; } .rep-card { margin-bottom:14px; } .rep-sec { font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } /* Barras de turnos por mes */ .barras { display:flex; align-items:flex-end; gap:10px; height:130px; } .barra-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; } .barra { width:100%; max-width:40px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg, var(--accent-2), var(--accent)); min-height:3px; transition:height .3s; } .barra-val { font-size:.72rem; font-weight:700; color:var(--text); } .barra-lbl { font-size:.7rem; color:var(--muted); text-transform:capitalize; } /* Distribución por estado */ .estado-linea { display:flex; height:14px; border-radius:8px; overflow:hidden; background:var(--line-soft); } .estado-seg { height:100%; } .estado-seg.activo { background:#22b573; } .estado-seg.cancelado { background:#ff2d55; } .estado-seg.ausente { background:#f59e0b; } .estado-leyenda { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:.82rem; color:var(--muted); } .estado-leyenda .pt { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; } .pt.activo { background:#22b573; } .pt.cancelado { background:#ff2d55; } .pt.ausente { background:#f59e0b; } /* Top servicios */ .svc-bar-row { display:flex; align-items:center; gap:10px; padding:7px 0; } .svc-bar-nom { flex:none; width:40%; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .svc-bar-track { flex:1; height:9px; background:var(--line-soft); border-radius:5px; overflow:hidden; } .svc-bar-fill { height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius:5px; } .svc-bar-val { flex:none; font-size:.8rem; font-weight:600; color:var(--muted); width:28px; text-align:right; } @media (min-width:768px) { .wrap.reportes-ancho { max-width:720px; } .kpi-grid { grid-template-columns:repeat(4, 1fr); } } /* Barra superior de vistas internas */ .topbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; } /* Topbar fija al hacer scroll. Se activa con . Bandera para revertir: quitar la clase del body en el arranque. */ body.sticky-topbar .topbar { position:sticky; top:0; z-index:40; margin:0 -20px 20px; padding:12px 20px; background:rgba(245,245,247,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); } .back { width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:1.1rem; color:var(--text); display:flex; align-items:center; justify-content:center; flex:none; } .back:hover { border-color:var(--accent); } .topbar h2 { margin:0; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; } .buscador { margin-bottom:12px; } /* Botón de ícono discreto en la topbar (empujado a la derecha) */ .icon-btn { margin-left:auto; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--muted); flex:none; display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; } .icon-btn:hover { border-color:var(--accent); color:var(--accent); } textarea { width:100%; padding:14px 16px; border-radius:13px; border:1px solid var(--line); background:#fbfbfd; color:var(--text); font-size:1rem; line-height:1.35; font-family:inherit; resize:vertical; -webkit-appearance:none; appearance:none; } textarea:focus { outline:none; border-color:var(--accent); background:#fff; } /* Notas internas del turno: alto cómodo, crece con el contenido. */ .notas-turno { min-height:130px; line-height:1.5; resize:none; overflow:hidden; } /* Lista de clientes */ .cli-row { display:flex; align-items:center; gap:12px; padding:13px 4px; cursor:pointer; border-bottom:1px solid var(--line-soft); } .cli-row:last-child { border-bottom:none; } .cli-row:hover { background:#fafafb; } .cli-av { width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); } .cli-info { flex:1; min-width:0; } .cli-nom { font-weight:600; font-size:.96rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cli-sub { font-size:.82rem; color:var(--muted); } .cli-count { font-size:.78rem; color:var(--muted); flex:none; } .cli-vacio { color:var(--muted); text-align:center; padding:24px 0; font-size:.9rem; } .cli-link-btn { width:100%; margin-top:14px; border:1px solid var(--line); background:var(--accent-soft); color:var(--accent); border-radius:12px; padding:12px; font-weight:600; cursor:pointer; } .cli-link-btn:hover { border-color:var(--accent); } .cli-del { width:100%; margin-top:10px; border:1px solid #ffd0d8; background:#fff5f7; color:#ff2d55; border-radius:12px; padding:12px; font-weight:600; cursor:pointer; } .cli-del:hover { background:#ffe9ee; } .cli-turnos-card { margin-top:16px; } .cli-sec { font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .cli-turno { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; } .cli-turno:last-child { border-bottom:none; } .cli-turno .est { font-size:.75rem; color:var(--muted); } .cli-turno.cancelado .fecha { text-decoration:line-through; color:var(--muted); } /* Autocompletado de cliente en alta de turno */ .autocomplete { position:relative; } .ac-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--card); border:1px solid #d0d0d5; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); max-height:220px; overflow-y:auto; padding:4px; } .ac-item { padding:10px 12px; border-radius:8px; cursor:pointer; } .ac-item:hover, .ac-item.sel { background:var(--accent-soft); } .ac-item .n { font-weight:600; font-size:.92rem; } .ac-item .w { font-size:.8rem; color:var(--muted); } .ac-new { color:var(--accent); font-weight:600; } /* Pie del dropdown: "+N más · seguí escribiendo". */ .ac-mas { padding:9px 12px; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line-soft); } /* Campo WhatsApp bloqueado (el teléfono viene del cliente vinculado). */ input.locked { background:#f0f0f2; color:var(--muted); cursor:not-allowed; border-color:var(--line-soft); } /* Tabs Próximos / Pasados */ .tabs { display:flex; gap:4px; background:#e9e9ec; border-radius:12px; padding:4px; margin-bottom:16px; } .tab { flex:1; border:none; background:none; border-radius:9px; padding:10px; font-size:.92rem; font-weight:600; color:var(--muted); cursor:pointer; transition:background .15s, color .15s; } .tab.active { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1); } /* Formularios */ label { display:block; font-size:.82rem; font-weight:500; color:var(--muted); margin:18px 0 8px; } .card > label:first-of-type { margin-top:0; } input, select { width:100%; padding:14px 16px; border-radius:13px; border:1px solid var(--line); background:#fbfbfd; color:var(--text); font-size:1rem; line-height:1.2; transition:border-color .15s, background .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; } /* Flecha propia para selects, con aire a la derecha */ select { padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; text-overflow:ellipsis; } input:focus, select:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } input::placeholder { color:#b8b8bd; } /* datetime-local: mostrar fecha y hora completas */ input[type="datetime-local"] { min-height:50px; } input[type="datetime-local"]::-webkit-calendar-picker-indicator { margin-left:auto; } .row { display:flex; gap:14px; } .row > div { flex:1; min-width:0; } .actions { display:flex; gap:12px; margin-top:22px; } button.act { flex:1; padding:15px; border:none; border-radius:13px; font-size:1rem; font-weight:600; cursor:pointer; transition:filter .15s, transform .06s, box-shadow .15s; } button.act:active { transform:scale(.98); } .btn-ics { background:#f0f0f2; color:var(--text); border:1px solid var(--line); } .btn-wa { background:var(--wa); color:#fff; box-shadow:0 4px 12px rgba(37,211,102,.28); } .btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(0,169,157,.3); } button.act:hover { filter:brightness(1.03); } button.act:disabled { background:#e8e8ea; color:#b0b0b5; cursor:not-allowed; filter:none; transform:none; box-shadow:none; } /* Preview del turno */ .preview { margin-top:22px; padding:20px; border-radius:16px; background:var(--accent-soft); border:1px solid var(--line-soft); } .preview .tag { font-size:.72rem; font-weight:600; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; } .preview .natural { margin-top:10px; font-size:1.2rem; line-height:1.55; color:#1d1d1f; font-weight:500; } .preview .natural .ph { color:var(--muted); font-weight:400; } /* Ajustes: servicios */ .svc-row { display:flex; gap:10px; align-items:center; margin-bottom:12px; } .svc-row .nom { flex:1; min-width:0; } .svc-row .dur { width:130px; flex:none; } .btn-add-svc { display:inline-flex; align-items:center; gap:6px; margin-top:2px; border:1px dashed var(--line); background:none; color:var(--accent); border-radius:11px; padding:9px 14px; font-size:.88rem; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; } .btn-add-svc:hover { border-color:var(--accent); background:var(--accent-soft); } .hint { font-size:.82rem; color:var(--muted); margin:8px 0 0; line-height:1.45; } /* Días de atención */ .dias { display:flex; gap:6px; } .dia-tog { flex:1; padding:11px 0; border-radius:11px; border:1px solid var(--line); background:#fbfbfd; color:var(--muted); font-size:.85rem; font-weight:600; cursor:pointer; text-align:center; transition:all .15s; user-select:none; } .dia-tog:hover { border-color:var(--accent); } .dia-tog.on { background:var(--accent); border-color:var(--accent); color:#fff; } /* ===== Agenda ===== */ .ag-row { display:flex; gap:0; margin-bottom:2px; } /* Columna de hora a la izquierda */ .ag-time { flex:none; width:58px; padding-top:14px; text-align:right; padding-right:14px; display:flex; flex-direction:column; align-items:flex-end; } .ag-h { font-size:1rem; font-weight:700; color:var(--text); line-height:1.1; } .ag-hf { font-size:.72rem; color:var(--muted); margin-top:2px; } .ag-h.tachado { text-decoration:line-through; color:var(--muted); } /* Cuerpo del turno, colgando de una línea vertical */ .ag-body { flex:1; min-width:0; position:relative; padding:12px 14px 14px 16px; border:1px solid var(--line-soft); border-left:3px solid var(--accent); background:#fbfbfd; border-radius:0 14px 14px 0; cursor:pointer; transition:background .15s, box-shadow .15s; margin-bottom:8px; } .ag-body:hover { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); } .ag-row.cancelado .ag-body { border-left-color:#ff2d55; cursor:default; } .ag-row.cancelado .ag-body:hover { background:var(--card); } /* Los turnos pasados se ven atenuados, pero SOLO el contenido de consulta, no el menú de acciones ni su dropdown (que deben verse plenos y clickeables). */ .ag-row.pasado .ag-time, .ag-row.pasado .ag-cli, .ag-row.pasado .ag-svc { opacity:.55; transition:opacity .15s; } .ag-row.pasado:hover .ag-time, .ag-row.pasado:hover .ag-cli, .ag-row.pasado:hover .ag-svc { opacity:.85; } .ag-row.avisado .ag-body { border-left-color:#34c759; } /* Cliente: nombre + (tag estado) + check, en línea. */ .ag-cli { min-width:0; font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .ag-svc { font-size:.9rem; color:var(--muted); margin-top:2px; } /* Celda del check "avisado". En móvil (tarjeta) va arriba a la derecha; si está vacía no ocupa espacio. */ .ag-check:empty { display:none; } .ag-check { position:absolute; top:12px; right:12px; } /* Reservamos espacio a la derecha del nombre para que el check no lo pise. */ .ag-row.avisado .ag-cli, .ag-row:not(.cancelado):not(.ausente):not(.pasado) .ag-cli { padding-right:40px; } .check { width:30px; height:30px; flex:none; border-radius:50%; cursor:pointer; border:1.5px solid var(--line); background:var(--card); color:#c8c8cc; font-size:.85rem; font-weight:700; transition:all .15s; } .check:hover { border-color:var(--accent); color:var(--accent); } .check.on { background:#34c759; border-color:#34c759; color:#fff; } .check.estatico { cursor:default; display:inline-flex; align-items:center; justify-content:center; } /* Turnos no editables (pasado / cancelado / ausente): sin cursor de edición. */ .ag-row.pasado .ag-body, .ag-row.cancelado .ag-body, .ag-row.ausente .ag-body { cursor:default; } .ag-row.pasado .ag-body:hover, .ag-row.cancelado .ag-body:hover, .ag-row.ausente .ag-body:hover { background:#fbfbfd; box-shadow:none; } /* Acciones del turno (móvil): debajo, en fila. */ .ag-actions { display:flex; gap:8px; margin-top:12px; align-items:center; } /* En turnos no-activos (solo menú ⋯), el menú va arriba a la derecha, no abajo. */ .ag-row.pasado .ag-actions, .ag-row.cancelado .ag-actions, .ag-row.ausente .ag-actions { position:absolute; top:12px; right:14px; margin:0; } .op-main { border:none; border-radius:10px; padding:8px 18px; font-size:.85rem; font-weight:600; background:var(--wa); color:#fff; cursor:pointer; transition:filter .15s, transform .06s; } .op-main.alt { background:var(--accent); } .op-main:hover { filter:brightness(1.04); } .op-main:active { transform:scale(.98); } /* Botón WhatsApp compacto: solo el ícono, verde de marca sobrio. */ .op-wa { width:40px; height:34px; flex:none; border:none; border-radius:10px; cursor:pointer; background:var(--wa); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:filter .15s, transform .06s; } .op-wa svg { width:19px; height:19px; } .op-wa:hover { filter:brightness(1.05); } .op-wa:active { transform:scale(.96); } /* Sin WhatsApp cargado: grisado y deshabilitado. */ .op-wa.off { background:#e6e6ea; color:#b3b3ba; cursor:not-allowed; } .op-wa.off:hover { filter:none; } /* Botón "Copiar" (cuando el turno no tiene WhatsApp). */ .op-copiar { border:none; border-radius:10px; padding:8px 16px; font-size:.85rem; font-weight:600; background:var(--accent); color:#fff; cursor:pointer; } .op-copiar:hover { filter:brightness(1.04); } /* Botón de email (sobre): tono violáceo suave. */ .op-mail { width:40px; height:34px; flex:none; border:1px solid #ded3f2; background:#f3eefc; border-radius:10px; cursor:pointer; color:#8b5cf6; display:inline-flex; align-items:center; justify-content:center; transition:filter .15s, border-color .15s; } .op-mail svg { width:18px; height:18px; } .op-mail:hover { border-color:#8b5cf6; filter:brightness(.98); } .op-mail.cargando { opacity:.7; cursor:wait; } /* Feedback tras enviar: rojo con X si falló, verde con tilde si ok. */ .op-mail.feedback-error { background:#ffe6e9; border-color:#ff2d55; color:#ff2d55; position:relative; } .op-mail.feedback-error::after { content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; background:inherit; border-radius:9px; } .op-mail.feedback-ok { background:#e3f7ec; border-color:#22b573; color:#22b573; position:relative; } .op-mail.feedback-ok::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; background:inherit; border-radius:9px; } /* Spinner de carga (reutilizable en botones-ícono). */ .spinner { width:15px; height:15px; display:inline-block; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .6s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Botón de link directo (ícono). Tono azulado suave para que combine junto al WhatsApp verde. Visible también en móvil. */ .op-link { width:40px; height:34px; flex:none; border:1px solid #cfe0f5; background:#eef4fd; border-radius:10px; cursor:pointer; color:#3a86ff; display:inline-flex; align-items:center; justify-content:center; transition:filter .15s, border-color .15s; } .op-link svg { width:17px; height:17px; } .op-link:hover { border-color:#3a86ff; filter:brightness(.98); } /* El link ya está como botón directo: lo sacamos del menú para no duplicar. */ .dropdown .mnu-link { display:none; } .menu { position:relative; flex:none; } .op-more { width:40px; height:34px; border:1px solid #e2e2e8; background:#f2f2f5; border-radius:10px; cursor:pointer; font-size:1.05rem; color:#6b6b76; letter-spacing:1px; transition:border-color .15s, color .15s, background .15s; } .op-more:hover { border-color:#c9c9d2; background:#ececf0; color:var(--text); } .dropdown { position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:214px; background:var(--card); border:1px solid #d0d0d5; border-radius:14px; /* Anillo + sombra marcada para despegarse de la tarjeta blanca del turno */ box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.12), 0 22px 48px rgba(0,0,0,.24); padding:6px; overflow:hidden; } .dropdown button { display:block; width:100%; text-align:left; border:none; background:none; padding:11px 12px; border-radius:9px; font-size:.9rem; color:var(--text); cursor:pointer; } .dropdown button:hover { background:var(--accent-soft); } .dropdown button.danger { color:#ff2d55; } .dropdown button.danger:hover { background:#fff0f2; } .dropdown .dd-sep { height:1px; background:var(--line); margin:6px 8px; } /* Scrim: oscurece levemente el fondo cuando hay un menú abierto, para que el desplegable resalte sobre las tarjetas blancas. */ .menu-scrim { position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .15s; } .menu-scrim.on { opacity:1; pointer-events:auto; } /* Etiqueta de sección Próximos / Pasados */ .sec-label { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:6px 0 4px; padding-top:14px; border-top:1px solid var(--line-soft); } .sec-label:first-child { border-top:none; padding-top:0; } .sec-label.pasado-label { color:var(--muted); } /* Encabezado de día */ .dia-label { font-size:.9rem; font-weight:600; color:var(--text); margin:18px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); } .dia-label.pasado { color:var(--muted); font-weight:500; } .ag-row.cancelado .ag-cli, .ag-row.ausente .ag-cli { color:var(--muted); } .ag-row.ausente .ag-body { border-left-color:#ff9500; } .tag-cancel, .tag-ausente { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; text-transform:uppercase; } .tag-cancel { color:#ff2d55; background:#fff0f2; } .tag-ausente { color:#c26a00; background:#fff4e5; } /* Modal */ .modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeOverlay .15s ease; } @keyframes fadeOverlay { from { opacity:0; } to { opacity:1; } } .modal { background:var(--card); border-radius:20px; padding:26px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.3); animation:popIn .18s ease; } @keyframes popIn { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } } .modal h3 { margin:0 0 8px; font-size:1.2rem; font-weight:600; } .modal p { margin:0 0 22px; color:var(--muted); font-size:.95rem; line-height:1.5; } .modal-actions { display:flex; gap:12px; } .btn-danger { background:#ff2d55; color:#fff; } /* Botón flotante "volver arriba". Bandera para revertir: quitar #fabTop del HTML. */ .fab-top { position:fixed; right:20px; bottom:20px; z-index:60; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:#fff; font-size:1.3rem; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.2); opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; pointer-events:none; } .fab-top.show { opacity:1; transform:translateY(0); pointer-events:auto; } .fab-top:hover { filter:brightness(1.05); } .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1d1d1f; color:#fff; padding:12px 20px; border-radius:12px; font-size:.9rem; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:50; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* Toast con botón de acción (asistente amigable). */ /* Banner de modo demo (fijo arriba). */ .demo-banner { position:fixed; top:0; left:0; right:0; z-index:70; background:#1d1d1f; color:#fff; text-align:center; font-size:.85rem; padding:8px 16px; } .demo-banner a { color:#7fe0c8; font-weight:700; text-decoration:none; } .demo-banner a:hover { text-decoration:underline; } body.con-demo-banner { padding-top:38px; } .toast.con-accion { display:flex; align-items:center; gap:14px; padding:12px 14px 12px 20px; pointer-events:auto; max-width:calc(100vw - 32px); } .toast-btn { border:none; background:var(--accent); color:#fff; border-radius:9px; padding:8px 16px; font-size:.86rem; font-weight:700; cursor:pointer; white-space:nowrap; flex:none; } .toast-btn:hover { filter:brightness(1.08); } .empty { text-align:center; color:var(--muted); padding:40px 10px; font-size:.95rem; line-height:1.5; } .ver-mas { width:100%; margin-top:10px; padding:12px; border:1px dashed var(--line); background:#fbfbfd; color:var(--accent); border-radius:12px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; } .ver-mas:hover { background:var(--accent-soft); border-color:var(--accent); } /* Transición suave entre vistas */ section[id^="view-"] { animation:fade .22s ease; } @keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } /* Mobile: aún más cómodo al tacto */ @media (max-width:520px) { body { padding:22px 14px 40px; } .card { padding:20px; border-radius:18px; } .navcard { padding:20px 18px; } /* Sensación app: tarjetas solo ícono + título centrados, sin descripción. Y sin acceso al calendario (la experiencia en pantalla chica es pobre). */ .navcard { flex-direction:column; align-items:center; text-align:center; gap:10px; } .navcard .txt p { display:none; } .navcard .txt h3 { margin:0; } .card-calendario { display:none; } /* Tarjetas sin marco propio: unificadas sobre el fondo de la página. */ .navcard { background:transparent; border:none; box-shadow:none; min-height:0; padding:14px 8px; } .navcard::before { display:none; } .navcard:hover, .navcard:active { box-shadow:none; border:none; transform:none; } /* Cerrar sesión no va en móvil (no se cierra sesión desde el teléfono). */ .logout-link { display:none; } /* Header del home tipo app: en dos filas para no cortar el negocio. Arriba la marca TurnOS; debajo el nombre del negocio + dirección. */ .ribbon { flex-wrap:wrap; padding:14px 16px; } .ribbon .brand::after { display:none; } /* sin separador vertical */ .biz { margin:0; text-align:left; width:100%; flex-basis:100%; padding-top:10px; margin-top:10px; border-top:1px solid var(--line-soft); } .biz-nombre { white-space:normal; font-size:1.02rem; line-height:1.25; } .biz-dir { white-space:normal; } input, select { padding:15px 16px; font-size:1.02rem; } select { background-position:right 16px center; } .actions { flex-direction:column; } .preview .natural { font-size:1.12rem; } /* Fecha y duración: apiladas para que la hora se lea completa */ .row { flex-direction:column; gap:0; } .svc-row .dur { width:132px; } } /* ========================================================================== LAYOUT DESKTOP / TABLET (≥768px): sidebar de navegación + contenido ancho. Por debajo de 768px NO aplica nada de esto: la app queda igual que en móvil. ========================================================================== */ .sidebar { display:none; } /* oculto en móvil */ @media (min-width:768px) { /* El body deja de centrar una columna angosta y pasa a ocupar el ancho. */ body { padding:0; align-items:stretch; justify-content:flex-start; } /* El wrap se vuelve el layout de 2 columnas a pantalla completa. */ .wrap { max-width:none; width:100%; min-height:100vh; display:grid; grid-template-columns:264px 1fr; align-items:start; } /* Anula los ensanchamientos puntuales del layout viejo (ya no aplican). */ .wrap.home-activa, .wrap.reportes-ancho { max-width:none; } /* --- Sidebar --- */ .sidebar { display:flex; flex-direction:column; gap:4px; position:sticky; top:0; align-self:start; height:100vh; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-right:1px solid var(--line-soft); padding:18px 14px; overflow-y:auto; } .sidebar .sb-brand { display:flex; align-items:center; gap:9px; padding:6px 8px 14px; cursor:pointer; user-select:none; } .sidebar .sb-brand .logo { width:30px; height:30px; } .sidebar .sb-brand h1 { font-size:1.15rem; } .sidebar .sb-biz { padding:0 10px 14px; border-bottom:1px solid var(--line-soft); margin-bottom:10px; } .sidebar .sb-biz .biz-nombre { font-weight:600; font-size:.9rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar .sb-biz .biz-dir { font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border-radius:11px; border:none; background:none; cursor:pointer; font-size:.94rem; font-weight:500; color:var(--text); text-decoration:none; transition:background .15s, color .15s; } .sb-item svg { width:20px; height:20px; flex:none; color:var(--muted); transition:color .15s; } .sb-item:hover { background:var(--accent-soft); } .sb-item.active { background:var(--accent-soft); color:var(--accent); font-weight:700; } .sb-item.active svg { color:var(--accent); } .sb-sep { height:1px; background:var(--line-soft); margin:10px 8px; } /* Cerrar sesión: al pie del sidebar, en tono de alerta suave. */ .sb-item.sb-logout { margin-top:auto; color:#ff2d55; } .sb-item.sb-logout svg { color:#ff2d55; } .sb-item.sb-logout:hover { background:#fff0f2; } /* --- Área de contenido --- */ .main-area { padding:28px 32px 60px; min-width:0; max-width:1100px; } /* En desktop el ribbon superior y el home de tarjetas son redundantes (la navegación vive en el sidebar): se ocultan. */ .ribbon { display:none; } #view-home { display:none !important; } /* La topbar de cada vista: en desktop no necesita el botón atrás (el sidebar navega). Ajustamos el sticky al nuevo contenedor. */ body.sticky-topbar .main-area .topbar { margin:-28px -32px 22px; padding:18px 32px; } /* Flecha atrás en desktop: SOLO en vistas a las que se entra desde dentro (Crear/Editar turno y Ficha de cliente). En las de nivel superior (Ver turnos, Clientes, Reportes, Ajustes) se navega por el sidebar. */ #view-ver .topbar .back, #view-clientes .topbar .back, #view-reportes .topbar .back, #view-ajustes .topbar .back { display:none; } /* El fab "volver arriba" no hace falta en desktop. */ .fab-top { display:none !important; } /* ---- Paso 2: aprovechar el ancho dentro de cada vista ---- */ /* Ver turnos: tabla ordenada que aprovecha el ancho. Estructura uniforme: hora | cliente | servicio | acciones, alineadas en columnas. */ #view-ver .tabs { max-width:340px; } #view-ver .buscador { max-width:460px; } #view-ver .card { max-width:none; padding:8px 10px; } /* Tabla simple: filas limpias, sin barra verde ni fondo ni recuadros. Solo un separador fino inferior. */ #view-ver .ag-row { align-items:stretch; margin:0; border-bottom:1px solid var(--line-soft); } /* Hora inicio y fin lado a lado (11:30 – 12:00), en una sola línea. */ #view-ver .ag-time { width:132px; padding:11px 16px; align-self:stretch; flex-direction:row; align-items:center; justify-content:center; gap:5px; } #view-ver .ag-time .ag-h { font-size:.95rem; } #view-ver .ag-time .ag-hf { margin:0; font-size:.9rem; } #view-ver .ag-time .ag-hf::before { content:"– "; } /* 4 columnas: cliente | servicio | avisado | acciones. */ #view-ver .ag-body { display:grid; align-items:stretch; gap:0; grid-template-columns:minmax(0,1fr) minmax(170px,230px) 56px 232px; padding:0; margin:0; border:none; border-radius:0; background:transparent; } /* Cada celda con su padding y separador vertical sutil. */ #view-ver .ag-cli, #view-ver .ag-svc, #view-ver .ag-check, #view-ver .ag-actions { padding:11px 14px; display:flex; align-items:center; } #view-ver .ag-svc, #view-ver .ag-check, #view-ver .ag-actions { border-left:1px solid var(--line-soft); } #view-ver .ag-time { border-right:1px solid var(--line-soft); } /* Celda de avisado: centrada (anula el absolute de móvil). */ #view-ver .ag-check { position:static; justify-content:center; top:auto; right:auto; } #view-ver .ag-check:empty { display:flex; } /* mantiene la columna aunque no haya check */ /* Cliente en una sola línea. */ #view-ver .ag-cli { font-size:1rem; margin:0; padding-right:16px; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Servicio: puede ocupar hasta 2 líneas en vez de cortarse. */ #view-ver .ag-svc { margin:0; white-space:normal; line-height:1.3; } #view-ver .ag-row:hover { background:rgba(0,0,0,.015); } #view-ver .ag-body:hover { background:transparent; box-shadow:none; } /* Acciones: columna del grid, a la derecha (anula el absolute de móvil). */ #view-ver .ag-actions, #view-ver .ag-row.pasado .ag-actions, #view-ver .ag-row.cancelado .ag-actions, #view-ver .ag-row.ausente .ag-actions { position:static; margin:0; justify-content:flex-end; top:auto; right:auto; gap:8px; } /* Encabezado de día como barra de sección tenue, para separarlo de los turnos. */ #view-ver .dia-label { margin:22px 0 0; border-bottom:none; background:var(--accent-soft); color:var(--text); padding:8px 16px; border-radius:8px; font-size:.82rem; letter-spacing:.02em; } #view-ver .dia-label.pasado { background:#eeeef0; color:var(--muted); } #view-ver .dia-label:first-child { margin-top:0; } /* Clientes: lista angosta y centrada (mismo criterio que Ver turnos). */ #view-clientes .buscador { max-width:680px; margin:0 auto 12px; display:block; } #view-clientes .card { max-width:680px; margin-left:auto; margin-right:auto; } /* Reportes: los gráficos en 2 columnas para no dejar tanto blanco. */ #view-reportes .rep-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; } /* Formularios: aprovechan el ancho en desktop. */ #view-crear .card { max-width:820px; } #view-cliente .card, #view-cliente .cli-turnos-card { max-width:720px; } #view-ajustes .card { max-width:820px; } /* Crear/editar turno: campos en 2 columnas para no apilar en vertical. */ #view-crear .form-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; } #view-crear .campo { min-width:0; } /* El servicio ocupa las 2 columnas (suele ser lo principal). */ #view-crear .campo:first-child { grid-column:1 / -1; } } /* La label dentro de .campo mantiene su margen superior. */ .campo > label:first-child { margin-top:0; } .campo { margin-top:2px; } [hidden] { display:none !important; } /* Evita el "flash" de la home antes de confirmar la sesión: el contenido permanece oculto hasta que el arranque marca . */ .wrap { visibility:hidden; } body.ready .wrap { visibility:visible; }