/* public/assets/app.css ========================================================= AGENDA - UI (Light Beauty + Masculino) + Login - Diseño blanco, limpio, “estético”. - Soporta 2 temas: .theme-fem y .theme-masc (en ). - NO rompe Dashboard/Ofertas: respeta .section / .section.active. ========================================================= */ /* ========================= TOKENS (DEFAULT = FEM) ========================= */ :root{ /* neutrales */ --bg: #f7f7fb; --surface: #ffffff; --surface-2: #fbfbff; --border: rgba(15, 23, 42, 0.10); --border-2: rgba(15, 23, 42, 0.08); --text: #0f172a; --muted: rgba(15, 23, 42, 0.62); /* sombras suaves */ --shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.06); --shadow: 0 18px 45px rgba(2, 6, 23, 0.08); /* FEM (default) */ --accent: #e11d8b; /* pink */ --accent-2: #7c3aed; /* violet */ --accent-3: #f472b6; /* soft pink */ --ok: #16a34a; --warn: #f59e0b; --danger: #ef4444; --violet: #8b5cf6; /* gradientes suaves */ --grad-accent: linear-gradient(135deg, rgba(225,29,139,1), rgba(124,58,237,1)); --grad-accent-soft: linear-gradient(135deg, rgba(225,29,139,.10), rgba(124,58,237,.10)); /* tipografía */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; /* radios */ --r-lg: 18px; --r-md: 14px; --r-sm: 12px; /* login bg (opcional) */ --login-bg-url: url("https://images.unsplash.com/photo-1520975693411-35a23f7d4a10?auto=format&fit=crop&w=2400&q=80"); } /* ========================= TEMA MASCULINO ========================= */ body.theme-masc{ --accent: #2563eb; /* blue */ --accent-2: #0ea5e9; /* sky */ --accent-3: #38bdf8; --grad-accent: linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,1)); --grad-accent-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.10)); } /* (opcional) si quieres forzar fem explícito */ body.theme-fem{} /* ========================= RESET ========================= */ *{ box-sizing:border-box; } html, body{ height:100%; width:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(1200px 700px at 20% 20%, rgba(124,58,237,.08), transparent 55%), radial-gradient(1100px 700px at 85% 80%, rgba(225,29,139,.07), transparent 55%), var(--bg); overflow-x:hidden; } a{ color: inherit; } .muted{ color: var(--muted); } /* blindaje para “hidden” (crítico) */ [hidden]{ display:none !important; } /* ========================= LOGIN (opcional, si lo usas) ========================= */ .page-login{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 28px 18px; position:relative; overflow:hidden; background: var(--bg); } .page-login::before{ content:""; position:absolute; inset:0; background-image: var(--login-bg-url); background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.05); transform: scale(1.03); z-index:0; } .page-login::after{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 800px at 20% 30%, rgba(255,255,255,.40), rgba(255,255,255,.85)), linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.92)); z-index:1; } .login-wrap{ width: min(980px, 100%); display:grid; grid-template-columns: 1fr 420px; gap: 22px; position:relative; z-index:2; } @media (max-width: 920px){ .login-wrap{ grid-template-columns: 1fr; } } .login-hero{ padding: 10px 6px; display:flex; flex-direction:column; justify-content:center; gap: 12px; } .login-hero h1{ margin:0; font-size: clamp(26px, 4vw, 44px); letter-spacing:-0.6px; } .login-hero p{ margin:0; max-width: 56ch; color: rgba(15,23,42,.65); line-height: 1.6; } .login-card{ background: rgba(255,255,255,.78); border: 1px solid rgba(15,23,42,.10); border-radius: var(--r-lg); box-shadow: var(--shadow); backdrop-filter: blur(14px); padding: 22px; } .login-top{ display:flex; align-items:center; gap: 12px; } .logo-circle{ width: 44px; height: 44px; border-radius: 999px; display:grid; place-items:center; background: var(--grad-accent-soft); border: 1px solid rgba(15,23,42,.10); } .login-title b{ display:block; font-size: 16px; } .login-title span{ display:block; font-size: 12px; color: rgba(15,23,42,.60); margin-top:2px; } .form{ display:flex; flex-direction:column; gap: 12px; margin-top: 12px; } .field label{ display:block; font-size: 12px; color: rgba(15,23,42,.70); margin: 0 0 6px 2px; } .input{ width:100%; display:flex; align-items:center; gap:10px; padding: 12px 12px; border-radius: var(--r-md); border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.72); transition: 0.15s ease; } .input:focus-within{ border-color: rgba(225,29,139,.45); box-shadow: 0 0 0 2px rgba(225,29,139,.12); } body.theme-masc .input:focus-within{ border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 2px rgba(37,99,235,.12); } .input input{ width:100%; border:0; outline:0; background: transparent; color: var(--text); font-size: 14px; } .actions{ display:flex; flex-direction:column; gap: 10px; } .btn{ border:0; border-radius: var(--r-md); padding: 12px 14px; font-weight: 800; cursor:pointer; transition: transform .08s ease, filter .15s ease, opacity .15s ease; } .btn:active{ transform: scale(0.985); } .btn-primary{ background: var(--grad-accent); color:#fff; box-shadow: 0 14px 34px rgba(225,29,139,.18); } body.theme-masc .btn-primary{ box-shadow: 0 14px 34px rgba(37,99,235,.18); } .btn-secondary{ background: rgba(15,23,42,.06); border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,.92); } .msg{ margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.70); } .msg.ok{ border-color: rgba(22,163,74,.28); } .msg.err{ border-color: rgba(239,68,68,.28); } /* ========================= PANEL SHELL ========================= */ .panel-shell{ min-height:100vh; background: radial-gradient(1200px 700px at 70% 85%, rgba(124,58,237,.07), transparent 55%), radial-gradient(900px 520px at 20% 25%, rgba(225,29,139,.06), transparent 55%), var(--bg); color: var(--text); } /* TOPBAR */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding: 16px 22px; border-bottom: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.74); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .brand{ display:flex; gap:12px; align-items:flex-start; min-width: 0; } .dot{ width:10px; height:10px; border-radius:999px; background: var(--grad-accent); margin-top:6px; flex: 0 0 auto; } .brand h1{ margin:0; font-size:18px; font-weight:900; letter-spacing:.2px; } .brand small{ display:block; color: rgba(15,23,42,.60); margin-top:2px; } .userbox{ display:flex; align-items:center; gap:12px; min-width: 0; } .pill{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.80); box-shadow: var(--shadow-sm); min-width: 0; } .avatar{ width:36px; height:36px; border-radius:999px; display:grid; place-items:center; background: var(--grad-accent-soft); border:1px solid rgba(15,23,42,.10); font-weight:900; flex: 0 0 auto; } .usertext{ min-width: 0; } .usertext b{ display:block; font-size:13px; line-height:1.1; } .usertext span{ display:block; font-size:12px; color: rgba(15,23,42,.60); max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-logout{ border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.85); color: rgba(15,23,42,.95); padding:10px 14px; border-radius: var(--r-md); cursor:pointer; font-weight:900; text-decoration:none; box-shadow: var(--shadow-sm); } .btn-logout:hover{ filter: brightness(1.02); } /* TABS */ .tabs{ display:flex; gap:10px; padding: 12px 22px 10px; flex-wrap: wrap; } .tab{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.80); cursor:pointer; font-weight:900; color: rgba(15,23,42,.92); box-shadow: var(--shadow-sm); transition: 0.15s ease; } .tab:hover{ transform: translateY(-1px); } .tab.active{ background: var(--grad-accent); color: #fff; border-color: rgba(0,0,0,0); box-shadow: 0 16px 40px rgba(225,29,139,.18); } body.theme-masc .tab.active{ box-shadow: 0 16px 40px rgba(37,99,235,.18); } /* CONTENT */ .content{ padding: 12px 22px 26px; } /* ========================= SECTIONS (CRÍTICO: no romper Dashboard/Ofertas) ========================= */ .section{ display:block; } /* visible por defecto; se oculta con [hidden] */ /* ========================= GRID + CARDS ========================= */ .grid2{ display:grid; /* Calendario (izquierda) un poco más ancho, como antes */ grid-template-columns: minmax(560px, 1.55fr) minmax(520px, 1fr); gap:16px; } .card{ border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.86); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); backdrop-filter: blur(10px); min-width: 0; } .card h2{ margin:0 0 8px; font-size:18px; letter-spacing:-0.2px; } @media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } } /* ========================= CALENDARIO (MES) ========================= */ .month-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap: 10px; } .month-title{ font-weight: 950; font-size: 14px; letter-spacing:.3px; } .month-nav{ display:flex; gap:8px; } .iconbtn{ width:38px; height:38px; border-radius: 12px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.90); color: rgba(15,23,42,.92); cursor:pointer; font-weight: 900; box-shadow: var(--shadow-sm); } .iconbtn:hover{ filter: brightness(1.02); } /* Grid mes */ .month-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .dow{ font-size:12px; color: rgba(15,23,42,.60); text-align:center; padding:6px 0; font-weight: 800; } .day{ border:1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.85); border-radius: var(--r-md); padding: 10px; min-height: 72px; cursor:pointer; transition: transform .08s ease, filter .12s ease; position: relative; box-shadow: var(--shadow-sm); min-width: 0; } .day:hover{ transform: translateY(-1px); } .day.disabled{ opacity:.35; cursor:default; box-shadow:none; } .day.active{ outline: 2px solid rgba(225,29,139,.35); box-shadow: 0 0 0 4px rgba(225,29,139,.10), var(--shadow-sm); } body.theme-masc .day.active{ outline: 2px solid rgba(37,99,235,.35); box-shadow: 0 0 0 4px rgba(37,99,235,.10), var(--shadow-sm); } .num{ font-weight: 950; font-size: 16px; line-height: 1.05; } .badge-status{ position:absolute; top:8px; right:8px; font-size:11px; padding: 3px 8px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.85); white-space: nowrap; max-width: calc(100% - 16px); overflow:hidden; text-overflow: ellipsis; } .st-disponible{ color: rgba(22,163,74,1); background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.18); } .st-parcial{ color: rgba(245,158,11,1); background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.20); } .st-lleno{ color: rgba(239,68,68,1); background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18); } .st-bloqueado{ color: rgba(139,92,246,1); background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.22); } .mini{ margin-top: 8px; font-size: 11px; color: rgba(15,23,42,.62); line-height: 1.25; } /* ========================= PANEL DEL DÍA ========================= */ .day-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 8px; gap: 12px; } .day-title{ font-weight: 950; font-size: 14px; } .day-head .muted{ font-size: 12px; } /* slots grid */ .slots{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; } .slot{ border-radius: 14px; padding: 10px 10px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.88); cursor:pointer; user-select:none; box-shadow: var(--shadow-sm); min-width: 0; } .slot:hover{ transform: translateY(-1px); } .slot .t{ font-weight: 950; font-size: 12px; line-height: 1.1; } .slot .s{ font-size: 11px; color: rgba(15,23,42,.62); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slot.free{ box-shadow: inset 0 0 0 1px rgba(22,163,74,.12), var(--shadow-sm); } .slot.busy{ cursor: default; background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.18); } .slot.blocked{ background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.22); } .slot.preview{ background: rgba(225,29,139,.10); border-color: rgba(225,29,139,.22); } body.theme-masc .slot.preview{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); } /* lista de citas */ .appt-list{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; } .appt{ border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.90); padding: 12px; display:flex; justify-content:space-between; gap: 10px; box-shadow: var(--shadow-sm); min-width: 0; } .appt b{ display:block; font-size: 13px; } .appt small{ display:block; font-size: 12px; color: rgba(15,23,42,.62); margin-top:2px; } .pilltag{ font-size: 11px; color: rgba(15,23,42,.70); padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.04); display:inline-block; margin-top: 6px; } /* botones (panel + modal) */ .btn{ padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.90); color: rgba(15,23,42,.92); cursor:pointer; font-weight: 950; box-shadow: var(--shadow-sm); } .btn:hover{ filter: brightness(1.02); } .btn-primary{ border: 0; background: var(--grad-accent); color: #fff; box-shadow: 0 16px 40px rgba(225,29,139,.16); } body.theme-masc .btn-primary{ box-shadow: 0 16px 40px rgba(37,99,235,.16); } .btn-danger{ border: 0; background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(220,38,38,.92)); color:#fff; box-shadow: 0 16px 40px rgba(239,68,68,.14); } .note{ font-size: 12px; color: rgba(15,23,42,.66); white-space: pre-line; } .hidden{ display:none !important; } /* ========================= MODAL ========================= */ .modal-backdrop{ position:fixed; inset:0; background: rgba(2,6,23,.48); display:none; align-items:center; justify-content:center; padding:16px; z-index:9999; } .modal-backdrop.show{ display:flex; } .modal{ width:min(860px, 96vw); border-radius: var(--r-lg); border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.92); box-shadow: 0 30px 90px rgba(2,6,23,.24); overflow:hidden; } .modal-top{ display:flex; justify-content:space-between; align-items:center; padding: 14px 16px; border-bottom: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.95); } .modal-top b{ font-size: 14px; } .modal-x{ width:36px; height:36px; border-radius: 12px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.92); color: rgba(15,23,42,.92); cursor:pointer; font-weight: 950; } .modal-x:hover{ filter: brightness(1.02); } .modal-body{ padding: 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .seg{ display:flex; gap: 8px; padding: 6px; border-radius: 14px; border: 1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.03); } .seg button{ flex:1; border:0; border-radius: 12px; padding: 10px 12px; cursor:pointer; font-weight: 950; color: rgba(15,23,42,.78); background: transparent; } .seg button.active{ background: var(--grad-accent); color:#fff; } /* Mini segmented control (usado en Topbar: selector de tema) */ .seg.seg-mini{ padding: 4px; gap: 6px; } .seg.seg-mini button{ padding: 8px 10px; font-size: 12px; line-height: 1; min-width: 34px; } .field input, .field textarea, .field select{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.92); color: var(--text); outline:none; } .field input:focus, .field textarea:focus{ border-color: rgba(225,29,139,.30); box-shadow: 0 0 0 4px rgba(225,29,139,.10); } body.theme-masc .field input:focus, body.theme-masc .field textarea:focus{ border-color: rgba(37,99,235,.30); box-shadow: 0 0 0 4px rgba(37,99,235,.10); } .field textarea{ resize: vertical; min-height: 44px; } .row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .modal-actions{ display:flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(15,23,42,.08); justify-content:flex-end; background: rgba(255,255,255,.95); } /* ========================= DASHBOARD cards (si usas #dashCards) ========================= */ #dashCards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .kpi{ border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.90); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm); min-width: 0; } .kpi .label{ font-size: 12px; color: rgba(15,23,42,.62); font-weight: 800; } .kpi .val{ margin-top: 10px; font-size: 26px; font-weight: 950; letter-spacing:-0.4px; line-height:1.1; overflow-wrap:anywhere; word-break:break-word; } .kpi .hint{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.60); } @media (max-width: 980px){ #dashCards{ grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ #dashCards{ grid-template-columns: 1fr; } .kpi .val{ font-size: 22px; } } /* ========================= RESPONSIVE (móvil) ========================= */ @media (max-width: 900px){ .topbar{ padding: 12px 14px; gap: 10px; flex-wrap: wrap; } .tabs{ padding: 10px 14px; } .content{ padding: 10px 14px 22px; } .pill{ max-width: 100%; } .usertext span{ max-width: 160px; } } @media (max-width: 520px){ .month-grid{ gap:8px; } /* deja esto si ya lo tienes */ /* Calendario compacto */ .day{ min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; } .day .badge-status, .day .mini{ display: none; } .day .num{ font-size: 13px; } /* Color por estado (usa el data-state que agregamos en panel.php) */ .day[data-state="DISPONIBLE"]{ background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.22); } .day[data-state="PARCIAL"]{ background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.22); } .day[data-state="LLENO"]{ background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.22); } .day[data-state="BLOQUEADO"]{ background: rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.26); } .day.disabled{ background: transparent; } .day.disabled{ background: transparent; border-color: rgba(15,23,42,.08); box-shadow: none; } .day:hover{ transform: none; } /* ===== FIX: formularios SIEMPRE vertical en celular ===== */ .row, .row2{ grid-template-columns: 1fr; } /* ===== FIX: grilla de horas no genere scroll horizontal ===== */ .slots{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px){ .slots{ grid-template-columns: 1fr; } } /* ===== Helpers del módulo público (link largo + botones) ===== */ .pub-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width: 980px){ .pub-grid{ grid-template-columns: 1fr; } } .pub-link{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; } .pub-actions{ display:flex; gap:10px; flex-wrap:wrap; } @media (max-width: 520px){ .pub-actions{ flex-direction:column; } .pub-actions .btn{ width:100%; } } /* ===== Modal usable en celular (que no corte campos) ===== */ @media (max-width: 520px){ /* el modal parte arriba y no centrado (evita perder altura útil) */ .modal-backdrop{ align-items: flex-start; padding: 12px; } /* el contenedor del modal usa toda la altura disponible */ .modal{ width: 100%; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; /* dejamos hidden acá, pero hacemos scroll en el body */ } /* fuerza 1 columna sí o sí + scroll interno */ .modal-body{ grid-template-columns: 1fr !important; flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; } /* botones siempre visibles (se quedan abajo) */ .modal-actions{ position: sticky; bottom: 0; flex-wrap: wrap; background: rgba(255,255,255,.95); padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .modal-actions .btn{ width: 100%; } } .offer-item{ display:flex; align-items:center; gap:14px; } .offer-thumb{ width:140px; height:70px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); display:block; } .offer-thumb{ width: 140px; height: 70px; object-fit: cover; border-radius: 12px; display: block; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.4); } /* ===== FIX: formularios SIEMPRE vertical en celular ===== */ @media (max-width: 520px){ .row, .row2{ grid-template-columns: 1fr !important; } /* slots en móvil */ .slots{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px){ .slots{ grid-template-columns: 1fr; } } /* ===== Tabla acotada al módulo booking settings ===== */ .booking-settings .table-wrap{ overflow-x:auto; } .booking-settings table{ width:100%; border-collapse:collapse; font-size:13px; } .booking-settings th, .booking-settings td{ padding:10px 8px; border-bottom:1px solid rgba(15,23,42,.08); text-align:left; vertical-align:top; } .booking-settings th{ font-size:12px; color: rgba(15,23,42,.70); font-weight: 950; } .booking-settings .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .booking-settings .wrapline{ white-space: normal; word-break: break-word; overflow-wrap:anywhere; } /* Dashboard clientes: responsive real */ @media (max-width: 980px){ .dashClientsGrid{ grid-template-columns: 1fr !important; } .custList{ max-height: none !important; } } /* Botones */ .btn-primary{ background: var(--accent) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; } .btn-soft{ background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); } /* Ficha bonita */ .custSummary{ padding: 12px; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; background: rgba(255,255,255,.65); } .custTitleRow{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .custName{ font-size:18px; font-weight:800; } .custMeta{ color: rgba(0,0,0,.55); font-size:13px; margin-top:2px; } .custStats{ text-align:right; color: rgba(0,0,0,.60); font-size:13px; } .muted{ color: rgba(0,0,0,.55); } .custChips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; } .chip{ padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.8); font-size:12px; font-weight:700; } .custImportant{ margin-top:10px; padding:10px 12px; border-radius:12px; background: rgba(255, 214, 0, .12); border:1px solid rgba(255, 214, 0, .35); font-weight:700; } /* Bitácora */ .entryComposer{ display:flex; gap:10px; align-items:center; margin:10px 0 12px 0; flex-wrap:wrap; } .entryComposer .inp{ flex:1; min-width:220px; } .timeline{ display:flex; flex-direction:column; gap:12px; } .tlItem{ display:flex; gap:10px; } .tlDot{ width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top:6px; } .tlBody{ flex:1; padding:10px 12px; border:1px solid rgba(0,0,0,.06); border-radius:14px; background: rgba(255,255,255,.72); } .tlTop{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; } .tlType{ font-weight:900; font-size:12px; } .tlWhen{ font-size:12px; color: rgba(0,0,0,.55); } .tlText{ font-size:14px; } /* --- Dashboard: Clientes + Ficha (responsive) --- */ .dashClientsGrid{ display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:start; } .dashClientCards{ max-height: 520px; overflow:auto; padding-right: 4px; } @media (max-width: 980px){ .dashClientsGrid{ grid-template-columns: 1fr; } .dashClientCards{ max-height: none; overflow: visible; } .custPanel{ margin-top: 12px; } .entryComposer{ grid-template-columns: 1fr; } } /* ===== Dashboard Clientes: modo seleccionado (UX) ===== */ body.client-selected .dashClientsGrid{ grid-template-columns: 1fr !important; } body.client-selected .dashClientCards{ display:none !important; } body.client-selected .dashClientDetails{ grid-column: 1 / -1 !important; } body.client-selected .btnBackToList{ display:inline-flex !important; } @media (max-width: 920px){ body.client-selected .dashClientCards{ display:none !important; } } /* ===== Clientes (mejora UX: ficha + observaciones asociables a cita) ===== */ .customerActions .btn{ background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); color: var(--text); } .customerActions .btn.is-active{ background: var(--accent); border-color: rgba(255,255,255,.18); color: #fff; } .custApptList{ display:flex; flex-direction:column; gap:12px; } .apptRow{ display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid rgba(0,0,0,.06); border-radius:14px; background: #fff; } .apptMain{ flex:1; min-width:0; } .apptTop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .apptStatus{ font-size:12px; font-weight:800; letter-spacing:.04em; color:#6b7280; } .apptWhen{ font-size:13px; color:#374151; } .apptNote{ margin-top:8px; color:#111827; } .apptActions{ flex:0 0 auto; } .badge{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px; background: rgba(0,0,0,.06); color:#374151; font-size:12px; font-weight:700; } .custObs{ width:100%; } .obsTable{ width:100%; border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden; background:#fff; } .obsHead, .obsRow{ display:grid; grid-template-columns: 170px 110px 200px 1fr 90px; gap:12px; padding:12px 14px; align-items:start; } .obsHead{ background: rgba(0,0,0,.03); font-weight:800; color:#374151; font-size:12px; text-transform:uppercase; letter-spacing:.03em; } .obsRow{ border-top:1px solid rgba(0,0,0,.06); color:#111827; font-size:14px; } .obsRow .right, .obsHead .right{ text-align:right; } @media (max-width: 860px){ .apptRow{ flex-direction:column; } .apptActions{ width:100%; } .apptActions .btn{ width:100%; } .obsHead{ display:none; } .obsRow{ grid-template-columns: 1fr; gap:6px; } .obsRow > div{ padding:2px 0; } .obsRow > div.right{ text-align:left; } .obsRow::after{ content:""; display:block; height:10px; } .entryComposer{ grid-template-columns: 1fr; } .entryComposer .input{ width:100%; } }