/* Taller One Class · identidad compartida con la web · 21/10/2026.
   Capa visual independiente: no modifica datos, rutas ni acciones. */
@import url('/oneclass-fonts/fonts.css');
:root{
 --oc-bg:#0a0a0c;--oc-alt:#0f1013;--oc-panel:#141418;--oc-raised:#1a1b20;
 --oc-line:#2a2a32;--oc-line-hi:#3a3a44;--oc-red:#e3122b;--oc-red-hi:#ff4655;
 --oc-ink:#f4f4f5;--oc-muted:#a1a1aa;--oc-green:#34c77b;--oc-amber:#f5a524;
 --oc-body:Barlow,system-ui,-apple-system,'Segoe UI',sans-serif;
 --oc-display:'Saira Condensed','Arial Narrow',var(--oc-body);
 --bg-primary:var(--oc-bg);--bg-secondary:var(--oc-alt);--bg-surface:var(--oc-panel);
 --bg-surface-hover:var(--oc-raised);--border-subtle:var(--oc-line);--border-glow:var(--oc-line-hi);
 --accent-blue:var(--oc-red);--accent-blue-glow:rgba(227,18,43,.18);
 --accent-emerald:var(--oc-green);--accent-crimson:var(--oc-red-hi);
 font-family:var(--oc-body);color:var(--oc-ink);background:var(--oc-bg);color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--oc-bg)!important;background-image:none!important;color:var(--oc-ink);font-family:var(--oc-body);font-size:16px;line-height:1.5}
button,input,select,textarea{font-family:var(--oc-body)}
::selection{background:var(--oc-red);color:#fff}
::-webkit-scrollbar-track{background:var(--oc-bg)}
::-webkit-scrollbar-thumb{background:#38383f;border:2px solid var(--oc-bg);border-radius:9px}
:focus-visible{outline:2px solid var(--oc-red-hi);outline-offset:4px}
.sidebar{
 width:248px;flex:0 0 248px;height:100dvh;padding:28px 16px 20px;
 background:var(--oc-alt)!important;border-right:1px solid var(--oc-line);
 box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto;
}
.sidebar .oc-brand{margin:0 0 24px;padding:4px 8px 24px;border-bottom:1px solid var(--oc-line);display:flex;flex-direction:column;gap:12px;text-align:center;text-shadow:none}
.oc-brand img{display:block;width:140px;max-width:100%;height:106px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.oc-brand span{display:flex;flex-direction:column;gap:3px}
.oc-brand strong{font-family:var(--oc-display);font-size:28px;font-weight:800;letter-spacing:.12em;line-height:1.1;color:var(--oc-ink)}
.oc-brand small{font-family:var(--oc-body);font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--oc-muted);text-transform:uppercase}
.sidebar nav{margin-top:0!important;gap:5px}
.sidebar .nav-link{min-height:48px;padding:12px 13px;margin:0;border:1px solid transparent!important;border-radius:9px;gap:12px;font-size:14px;font-weight:600;color:#b7b7c1!important;transform:none!important;text-shadow:none;transition:background .18s,border-color .18s,color .18s}
.sidebar .nav-link svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.7}
.sidebar .nav-link:hover{background:#1b1b21;color:#fff!important;border-color:var(--oc-line)!important}
.sidebar .nav-link.active{background:rgba(227,18,43,.11);border-color:rgba(227,18,43,.3)!important;color:#fff!important;box-shadow:inset 3px 0 var(--oc-red);font-weight:700}
.sidebar .nav-link.active svg{color:var(--oc-red-hi)}
.sidebar .nav-link[href='/finances']{margin-top:16px!important;border-top:1px solid var(--oc-line)!important;border-radius:0 0 9px 9px}
.main-content{min-width:0;height:100dvh;padding:36px 40px 48px;background:radial-gradient(ellipse at 100% 0,rgba(227,18,43,.045),transparent 45%),var(--oc-bg)}
.main-content::before{content:'ONE CLASS / GESTIÓN DEL TALLER';display:block;font-family:var(--oc-display);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--oc-muted);padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--oc-line)}
h1,h2,h3,h4,h5,h6{color:var(--oc-ink);text-shadow:none;letter-spacing:0}
h1{font-family:var(--oc-display);font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:.01em;line-height:1.06;text-transform:uppercase;background:none!important;-webkit-text-fill-color:currentColor!important;margin:0 0 14px;text-shadow:none}
h2{font-family:var(--oc-display);font-size:27px;font-weight:700;line-height:1.16}
h3{font-family:var(--oc-display);font-size:23px;font-weight:700;line-height:1.2}
.subtitle{font-size:15px!important;color:var(--oc-muted)!important;line-height:1.5}
.glass-panel{background:linear-gradient(160deg,#19191f,#141418)!important;border:1px solid var(--oc-line);border-radius:14px;padding:24px;box-shadow:0 8px 28px rgba(0,0,0,.16);backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;transition:border-color .18s}
.glass-panel:hover{border-color:var(--oc-line-hi);box-shadow:0 8px 28px rgba(0,0,0,.16)}
.btn,.btn-primary,.btn-secondary,.btn-success,.btn-danger{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;
 border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:700;line-height:1.3;
 text-decoration:none;cursor:pointer;box-shadow:none!important;letter-spacing:.01em;transition:background .18s,border-color .18s;
}
.btn:not([style*='background']),.btn-primary:not([style*='background']){background:var(--oc-red)!important;color:#fff}
.btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-success:hover,.btn-danger:hover{transform:none!important;filter:brightness(1.08);box-shadow:none!important}
.btn-secondary{background:var(--oc-raised)!important;border-color:var(--oc-line-hi)!important;color:var(--oc-ink)!important}
.btn-success{background:#153326!important;color:#8eebb7!important;border-color:#28563d!important}
.btn-danger{background:#321820!important;color:#ff9aa4!important;border-color:#60303a!important}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important;filter:none!important}
.btn-icon{width:36px;min-height:36px;background:#202026;border-color:var(--oc-line);border-radius:8px;color:#c4c4cc;box-shadow:none}
.btn-icon:hover{transform:none;background:#303038;border-color:#50505b}
.btn-icon.delete{color:#ff8a95!important}
.input-field{min-height:46px;padding:11px 14px;background:#0d0d11!important;border:1px solid var(--oc-line-hi);border-radius:9px;box-shadow:none;color:var(--oc-ink);font-size:15px;transition:border-color .18s,box-shadow .18s}
.input-field:focus{background:#0d0d11!important;border-color:var(--oc-red-hi)!important;box-shadow:0 0 0 3px rgba(227,18,43,.13)!important}
.input-field::placeholder{color:#82828d}
select.input-field{padding-right:38px;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important}
select.input-field option{background:var(--oc-panel);color:var(--oc-ink)}
label,.input-group label{color:#c6c6ce!important;font-size:13px;font-weight:600;letter-spacing:.02em}
.data-table{border-radius:10px;border-color:var(--oc-line);box-shadow:none}
.data-table thead{background:#202026;backdrop-filter:none}
.data-table th{color:#b0b0bc;font-size:11px;font-weight:700;letter-spacing:.1em;padding:13px 16px;border-color:var(--oc-line)}
.data-table td{padding:14px 16px;font-size:14px;border-bottom-color:#282830}
.data-table th{white-space:nowrap}
.data-table:has(th:nth-child(4):last-child) td:first-child{min-width:140px}
.data-table tbody tr{background:transparent;transform:none!important}
.data-table tbody tr:hover{background:#24242c!important;transform:none!important}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--oc-line);border-radius:6px;background:#202026;font-size:11px;font-weight:600;letter-spacing:.02em;color:#c8c8d0;white-space:nowrap;text-transform:none}
/* Calendario y tarjetas: conservar distribución y significado de los estados. */
.header-actions{align-items:flex-start!important;gap:18px;flex-wrap:wrap}
.action-buttons{gap:9px!important;flex-wrap:wrap}
.content-layout{grid-template-columns:300px minmax(0,1fr)!important;gap:24px!important}
.calendar-panel{padding:20px!important}
.calendar-header h3{font-family:var(--oc-display);font-size:24px!important;text-transform:uppercase}
.calendar-grid-header{font-size:11px!important;color:var(--oc-muted)!important;letter-spacing:.02em}
.calendar-cell{background:#202026!important;border-radius:7px!important;color:var(--oc-ink)}
.calendar-cell.empty{background:transparent!important}
.calendar-cell:hover:not(.empty){background:#352029!important;border-color:#7c2634!important}
.calendar-cell.today{border-color:var(--oc-red-hi)!important}
.calendar-cell.selected{background:var(--oc-red)!important;border-color:var(--oc-red)!important;color:#fff!important}
.appointment-dot{background:var(--oc-red-hi)!important;box-shadow:none!important}
.day-number{font-size:14px!important;font-weight:600}
.cards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))!important;gap:14px!important}
.appointment-card{padding:20px!important;border-top:2px solid #393940}
.appointment-card .card-top{gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--oc-line);padding-bottom:13px}
.datetime-info{gap:6px!important;flex-wrap:wrap}
.datetime-info .badge{background:#232329!important;color:#c4c4ce!important;border-color:#383840!important}
.appointment-card .card-body h3{font-family:var(--oc-body);font-size:17px!important;line-height:1.4}
.appointment-card .reason{color:#b6b6c0!important;font-size:14px!important;line-height:1.5;overflow-wrap:anywhere}
.appointment-card .card-bottom{border-top:1px solid var(--oc-line);padding-top:12px}
.status-badge{border-radius:999px;padding:4px 9px;font-size:11px;line-height:1.5;font-weight:700;white-space:nowrap}
.status-badge.confirmed,.status-badge.client-confirmed{background:#173023!important;color:#89dda9!important}
.status-badge.pending{background:#342b17!important;color:#f3cc80!important}
.status-badge.cancelled{background:#361922!important;color:#ffa0aa!important}
.status-badge.modified{background:#242b3b!important;color:#b8caee!important}
.add-form{border-left-color:var(--oc-red)!important}
.filter-info{background:rgba(227,18,43,.08)!important;border-color:#5b2630!important;color:var(--oc-ink)!important}
/* Reemplazar únicamente los acentos azules decorativos antiguos. */
.main-content [style*='color: rgb(0, 166, 255)'],.main-content [style*='color: rgb(88, 166, 255)'],.main-content [style*='color: rgb(0, 112, 243)']{color:#ff6877!important}
.main-content [style*='background: rgb(0, 166, 255)'],.main-content [style*='background: rgb(0, 112, 243)']{background:var(--oc-red)!important;color:#fff!important}
.main-content .btn[style*='rgb(0, 166, 255)'],.main-content .btn[style*='rgb(0, 112, 243)']{background:var(--oc-red)!important;color:#fff!important}
.main-content [style*='background: rgba(0, 166, 255, 0.1)']{background:rgba(227,18,43,.08)!important}
/* Acceso y experiencia simplificada del dueño en el celular. */
#oc-login{font-family:var(--oc-body)!important;background:radial-gradient(ellipse at 50% 15%,#2a1017,var(--oc-bg) 60%)!important}
#oc-login form{padding:28px 24px!important;border:1px solid var(--oc-line);border-radius:20px;background:rgba(20,20,24,.9)}
#oc-login h1{font-family:var(--oc-display)!important;font-size:32px!important}
#oc-login input{background:#0d0d11!important;border-color:var(--oc-line-hi)!important;border-radius:10px!important}
#oc-login button{background:var(--oc-red)!important;border-radius:10px!important}
#ocs{background:var(--oc-bg)!important;color:var(--oc-ink)!important;font-family:var(--oc-body)!important}
#ocs .top{padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px!important;background:var(--oc-alt)!important;border-color:var(--oc-line)!important}
#ocs .top img{content:url('/one-class-logo.webp');width:56px!important;height:48px!important;object-fit:contain;border-radius:0!important}
#ocs .top h1{font-family:var(--oc-display)!important;font-size:26px!important;letter-spacing:.08em!important;text-transform:uppercase}
#ocs .top small{font-family:var(--oc-body);font-size:12px!important;color:var(--oc-muted)!important;letter-spacing:.03em}
#ocs .chico{font-size:12px!important;background:#202026!important;border-color:var(--oc-line-hi)!important;color:#d4d4da!important;border-radius:9px!important;min-height:40px}
#ocs .inicio{padding:18px 16px 24px!important}
#ocs .resumen{gap:9px!important;margin-bottom:20px!important}
#ocs .dato{padding:14px 6px!important;background:linear-gradient(160deg,#1d1d24,#141418)!important;border-color:var(--oc-line)!important;border-radius:12px!important;text-align:left!important}
#ocs .dato b{font-family:var(--oc-display);font-size:34px!important;font-weight:700!important;margin:0 5px 6px;color:var(--oc-ink)}
#ocs .dato span{font-size:12px!important;margin:0 5px;color:#b6b6c1!important}
#ocs .dato.alerta{border-color:#805c26!important;background:#292217!important}
#ocs .dato.alerta b{color:var(--oc-amber)!important}
#ocs h2{font-family:var(--oc-display)!important;font-size:19px!important;letter-spacing:.06em!important;color:var(--oc-ink)!important;margin:26px 0 12px!important;border-bottom:1px solid var(--oc-line);padding-bottom:9px}
#ocs h2::before{content:'';display:inline-block;width:3px;height:17px;background:var(--oc-red);margin-right:9px;flex:none}
#ocs h2 small{margin-left:auto}
#ocs .preg,#ocs .chat .preg{background:linear-gradient(135deg,#24181f,#19191f)!important;border-color:#52303b!important;border-left:3px solid var(--oc-red)!important;border-radius:12px!important;padding:15px!important}
#ocs .preg p{font-size:16px!important;line-height:1.45!important;font-weight:600!important}
#ocs .ops button{background:#25252d!important;border-color:#41414b!important;border-radius:9px!important;min-height:46px!important}
#ocs .ops button.ok{background:#203b2c!important;border-color:#386b4d!important}
#ocs .fila{background:var(--oc-panel)!important;border-color:var(--oc-line)!important;border-radius:12px!important}
#ocs .fila>button.cab{padding:14px 12px!important;min-height:78px!important}
#ocs .izq{font-family:var(--oc-display);font-size:24px!important;color:var(--oc-ink)}
#ocs .izq small{font-family:var(--oc-body);font-size:11px!important;color:var(--oc-muted)!important}
#ocs .med b{font-size:16px!important;font-weight:600!important}
#ocs .med span{font-size:14px!important;color:#b4b4c0!important}
#ocs .pill{font-size:11px!important;font-weight:600!important;max-width:115px;white-space:normal!important;text-align:center}
#ocs .btn{border-radius:9px!important;font-size:14px!important}
#ocs .verde,#ocs .chat .prop .si{background:#205a3b!important}
#ocs .wa{background:#192b21!important;color:#8eebb7!important;border-color:#31523f!important}
#ocs .rojo{background:#2b1820!important;color:#ff9aa4!important;border-color:#62313d!important}
#ocs .nov button,#ocs .chat .nov button{background:var(--oc-panel)!important;border-color:var(--oc-line)!important;border-radius:12px!important;font-size:15px!important}
#ocs .mas,#ocs .chat .ayuda button{background:transparent!important;border-color:var(--oc-line-hi)!important;color:#c4c4ce!important;border-radius:9px!important;min-height:44px}
#ocs .barra-asis,#ocs .chat .barra{background:var(--oc-alt)!important;border-color:var(--oc-line)!important}
#ocs .barra-asis button.abrir{background:#1b1b21!important;border-color:#42424e!important;border-radius:12px!important;color:#bcbcc7!important;font-size:15px!important;min-height:54px!important}
#ocs .barra-asis button.abrir b{border-radius:9px!important;background:var(--oc-red)!important}
#ocs .chat-top{background:var(--oc-alt);border-color:var(--oc-line)!important}
#ocs .chat .ia,#ocs .chat .prop{background:var(--oc-panel)!important;border-color:var(--oc-line-hi)!important}
#ocs .chat .yo{background:#ac172c!important}
#ocs .chat .burb{font-size:16px!important;border-radius:14px!important;line-height:1.5!important}
#ocs .chat .prop .txt{background:var(--oc-bg)!important}
#ocs .chat textarea{background:var(--oc-panel)!important;border-color:var(--oc-line-hi)!important;border-radius:12px!important}
#ocs .chat .enviar,#ocs .chat .mic{border-radius:12px!important}
#ocs .chat .mic{background:#292930!important}
#ocs .hoja{background:var(--oc-panel)!important;border-color:var(--oc-line-hi)!important}
#oc-volver{background:var(--oc-alt)!important;border-color:var(--oc-line)!important;font-family:var(--oc-body)!important}
#ocs h2{justify-content:flex-start!important;gap:9px}
#ocs h2::before{margin-right:0!important}
#ocs .med b{white-space:normal!important;overflow-wrap:anywhere}
#oc-wa-aviso{top:auto!important;left:auto!important;right:24px;bottom:24px;transform:none!important;width:auto;max-width:450px!important;background:#302515!important;border-color:#82622d!important;border-radius:12px!important;font-family:var(--oc-body)!important;font-size:13px!important;line-height:1.4!important;box-shadow:0 12px 36px #0006!important}
#oc-wa-aviso span{flex:1;min-width:0}
#oc-wa-aviso a{font-size:13px!important;border-radius:8px!important;padding:9px 12px!important}
#oc-wa-aviso button{min-width:32px;min-height:36px}
@media(min-width:821px) and (max-width:1150px){.sidebar{width:210px;flex-basis:210px;padding-inline:12px}.main-content{padding:28px 24px}.content-layout{grid-template-columns:260px minmax(0,1fr)!important}.sidebar .nav-link{font-size:13px;padding-inline:10px}}
@media(max-width:820px){
 .sidebar{flex-basis:auto!important;background:var(--oc-alt)!important;border-top-color:var(--oc-line)!important}
 .sidebar .oc-brand{display:none!important}
 .sidebar .nav-link{min-height:63px;border-radius:0!important;border:0!important;border-top:2px solid transparent!important;box-shadow:none!important;gap:5px!important;font-size:10px!important;padding:10px 6px!important}
 .sidebar .nav-link.active{border-top-color:var(--oc-red)!important;background:rgba(227,18,43,.12)!important}
 .sidebar .nav-link[href='/finances']{margin-top:0!important;border-top:2px solid transparent!important}
 .sidebar .nav-link[href='/finances'].active{border-top-color:var(--oc-red)!important}
 .sidebar::after{background:linear-gradient(90deg,transparent,var(--oc-alt) 65%)!important}
 .main-content{padding:22px 16px calc(94px + env(safe-area-inset-bottom,0px))!important}
 .main-content::before{font-size:11px;padding-bottom:12px;margin-bottom:20px;letter-spacing:.15em}
 h1{font-size:30px!important;line-height:1.06!important}h2{font-size:25px!important}h3{font-size:22px!important}
 .glass-panel{padding:16px!important;border-radius:12px!important}
 .content-layout{grid-template-columns:minmax(0,1fr)!important}
 .calendar-panel{max-width:440px!important;width:100%;margin-inline:auto}
 .calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
 .calendar-grid-header{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
 .header-actions{gap:12px}.action-buttons{width:100%;display:flex;gap:8px!important}.action-buttons>*{flex:1}
 .btn,.btn-primary,.btn-secondary,.btn-success,.btn-danger{min-height:46px;font-size:14px}
 .input-field,input,select,textarea{font-size:16px!important}
 .cards-grid{grid-template-columns:minmax(0,1fr)!important}
 #ocs h1{font-size:26px!important}
 #oc-wa-aviso{left:12px!important;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));max-width:none!important;width:auto!important;padding:10px 12px!important}
 body:has(#ocs.en-chat) #oc-wa-aviso{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
 body,.main-content{background:#fff!important;color:#111!important}
 .sidebar,.main-content::before{display:none!important}
 h1,h2,h3,label,.glass-panel,.data-table th,.data-table td{color:#111!important;-webkit-text-fill-color:currentColor!important}
 .glass-panel{background:#fff!important;border-color:#bbb!important;box-shadow:none!important}
}