/* Version: 0.1.0 Text Domain: soyfan */ /* ===== Header fijo — reserva global cuando exista header ===== */ :root{ --cb-head-h: 0px; } /* fallback; el JS lo actualiza con la altura real */ body.admin-bar{ --wp-admin-bar-h: 32px; } @media (max-width:782px){ body.admin-bar{ --wp-admin-bar-h: 46px; } } /* Reserva en TODAS las páginas donde el header esté activo (.has-cb-head en ) */ .has-cb-head body{ padding-top: var(--cb-head-h); } @supports (padding: max(0px)){ .has-cb-head body{ padding-top: calc(var(--cb-head-h) + env(safe-area-inset-top)); } } /* Suma la barra de admin cuando existe */ .has-cb-head body.admin-bar{ padding-top: calc(var(--cb-head-h) + var(--wp-admin-bar-h, 0px)); } @supports (padding: max(0px)){ .has-cb-head body.admin-bar{ padding-top: calc(var(--cb-head-h) + var(--wp-admin-bar-h, 0px) + env(safe-area-inset-top)); } } /* El header no puede medir menos que la reserva */ #cb-chrome-head{ min-height: var(--cb-head-h); } /* Anclas (#id) no quedan ocultas detrás del header */ .has-cb-head [id]{ scroll-margin-top: calc(var(--cb-head-h) + var(--wp-admin-bar-h, 0px) + 12px); } /* Evitá colapso de márgenes del primer bloque */ .has-cb-head #site-content, .has-cb-head main{ display: flow-root; } .has-cb-head #site-content > :first-child, .has-cb-head main > :first-child{ margin-top: 6px; } /* ====================================================================== SOYFAN · MENU DASHBOARD (CSS) – Escopado dentro de .sf-dash – Tema por --brand – Móvil: bottom bar con 5 botones (centro = menú) – Logo dual: logo completo ↔ favicon al plegar (transición suave) ====================================================================== */ /* Scope & tokens */ .sf-dash{position:relative; isolation:isolate;} .sf-dash{ /* Layout/base */ --aside-w:292px; --aside-w-compact:86px; --gap:20px; --radius:18px; --border:rgba(17,24,39,.08); --card:#ffffff; --shadow:0 10px 30px rgba(2,6,23,.10); --text:#0f172a; --muted:#64748b; --bb-h:66px; /* altura bottom bar */ /* Posición/left del aside + tab (CSS-driven) */ --aside-left: 24px; /* si cambiás el left del aside, ajustá esta var */ --tab-gap: 14px; /* mitad del ancho del tab aprox. */ --tab-left: calc(var(--aside-left) + var(--aside-w) - var(--tab-gap)); /* ======= TEMA (cambiar SOLO esta variable) ======= */ --brand: #FF421C; /* Paleta derivada automáticamente desde --brand */ --brand-2: color-mix(in oklab, var(--brand) 82%, white 18%); --accent: var(--brand); --accent-2: var(--brand-2); --hover: color-mix(in oklab, var(--brand) 10%, transparent); --active: color-mix(in oklab, var(--brand) 18%, transparent); } .sf-dash[data-compact="1"]{ /* cuando está plegado, recalculamos el left del tab contra el ancho compacto */ --tab-left: calc(var(--aside-left) + var(--aside-w-compact) - var(--tab-gap)); } /* Propagar el tema a componentes internos sin afectar otros shortcodes */ .sf-dash, .sf-dash .sf-root{ --accent: var(--brand); --accent-2: var(--brand-2); } /* Tipografía del MENÚ (aside, solapita y bottom bar) */ .sf-dash .sf-aside, .sf-dash .sf-aside * , .sf-dash .sf-tab, .sf-dash .sf-bottombar{ font-family:"Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } /* FIX: que los íconos usen la fuente correcta */ .sf-dash .dashicons, .sf-dash .dashicons::before{ font-family: "dashicons" !important; font-style: normal !important; font-weight: normal !important; speak: never; } /* ===== Aside flotante ===== */ .sf-dash .sf-aside{ position:fixed; z-index:1000; left:var(--aside-left); top:24px; bottom:24px; width:var(--aside-w); background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; /* Animaciones */ transition: width .26s cubic-bezier(.22,1,.36,1), transform .25s ease, top .2s ease; } /* Plegado */ .sf-dash[data-compact="1"] .sf-aside{ width:var(--aside-w-compact); } /* Solapita (PC) – elemento FUERA del aside, posición fija */ .sf-dash .sf-tab{ position:fixed; z-index:1001; width:28px; height:54px; border-radius:12px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); display:grid; place-items:center; cursor:pointer; transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease; /* LEFT seguro, ligado al ancho del aside (normal/compacto) */ left: var(--tab-left) !important; } .sf-dash .sf-tab .dashicons{font-size:18px; color:var(--muted);} .sf-dash[data-compact="1"] .sf-tab{ transform: translateX(-6px) rotate(180deg); } /* =========================== Head: LOGO DUAL con transición – .sf-logo__full (logo rectangular) – .sf-logo__mini (favicon/ícono Brand) =========================== */ .sf-dash .sf-head{ padding:14px 14px 6px; display:flex; justify-content:center; align-items:center; } .sf-dash .sf-logo{ position:relative; width:100%; height:48px; display:grid; place-items:center; overflow:hidden; } .sf-dash .sf-logo img{ position:absolute; inset:auto; /* sólo para transición */ max-height:50px; width:auto; object-fit:contain; border-radius:0; transition: opacity .18s ease, transform .18s ease, filter .18s ease; will-change: opacity, transform, filter; } /* Expandido: se ve el logo completo, el mini queda oculto */ .sf-dash .sf-logo .sf-logo__full{ opacity:1; transform:translateY(0) scale(1); filter:none; } .sf-dash .sf-logo .sf-logo__mini{ opacity:0; transform:translateY(4px) scale(.85); filter:blur(.2px); } /* Compacto: ocultar logo y mostrar favicon */ .sf-dash[data-compact="1"] .sf-logo .sf-logo__full{ opacity:0; transform:translateY(4px) scale(.98); filter:blur(.2px); } .sf-dash[data-compact="1"] .sf-logo .sf-logo__mini{ opacity:1; transform:translateY(0) scale(1); filter:none; max-height:35px; } /* Accesibilidad: reducir movimiento */ @media (prefers-reduced-motion: reduce){ .sf-dash .sf-logo img{ transition:none; } } /* Divider */ .sf-dash .sf-divider{height:1px; background:#e5e7eb; margin:12px 14px;} /* Usuario: avatar + nombre al lado */ .sf-dash .sf-user{display:flex; align-items:center; gap:12px; padding:10px 14px 12px;} .sf-dash .sf-avatar{width:42px; height:42px; border-radius:50%; overflow:hidden; flex:0 0 42px; border:1px solid #e5e7eb;} .sf-dash .sf-avatar img{width:100%; height:100%; object-fit:cover;} .sf-dash .sf-username{font-weight:700; color:var(--text); font-size:13px; line-height:1.2;} .sf-dash[data-compact="1"] .sf-username{display:none;} /* Navegación */ .sf-dash .sf-nav{list-style:none; margin:8px 8px 0; padding:0; overflow:auto;} .sf-dash .sf-item{margin:4px 0;} .sf-dash .sf-link{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--text);} .sf-dash .sf-link:hover{background:var(--hover);} .sf-dash .sf-item.is-active>.sf-link{ background:var(--active); color:var(--accent); font-weight:600; position:relative; } .sf-dash .sf-item.is-active>.sf-link::after{ content:''; position:absolute; right:6px; width:6px; height:22px; border-radius:6px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); } .sf-dash .sf-ico{ font-size:18px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color: var(--accent); } .sf-dash .sf-label{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .sf-dash[data-compact="1"] .sf-label{display:none;} /* Submenú */ .sf-dash .has-children>.sf-link{position:relative;} .sf-dash .caret{margin-left:auto; color:#9aa2af; transition:transform .22s ease;} .sf-dash .is-open>.sf-link .caret{transform:rotate(90deg);} .sf-dash .sf-sub{list-style:none; margin:4px 0 8px 34px; padding:0; max-height:0; overflow:hidden; transition:max-height .28s ease;} .sf-dash .is-open>.sf-sub{max-height:800px;} .sf-dash[data-compact="1"] .sf-sub{display:none;} /* Footer */ .sf-dash .sf-footer{margin-top:auto; padding:10px; display:flex; justify-content:flex-end;} .sf-dash[data-compact="1"] .sf-footer{justify-content:center;} .sf-dash .sf-logout{ color:#9aa2af; text-decoration:none; padding:8px; border-radius:10px; width:42px; height:42px; display:grid; place-items:center; } .sf-dash .sf-logout:hover{background:#f3f4f6;} /* Contenido (despega del aside en PC) */ .sf-dash .sf-content{ padding:24px; margin-left:calc(24px + var(--aside-w) + 20px); transition: margin-left .26s cubic-bezier(.22,1,.36,1), padding-bottom .2s ease; } .sf-dash[data-compact="1"] .sf-content{margin-left:calc(24px + var(--aside-w-compact) + 20px);} /* ======= MÓVIL: off-canvas con overlay + bottom bar ======= */ @media (max-width: 768px){ .sf-dash .sf-aside{ left:0; top:0; bottom:0; width:min(84vw, 330px); border-radius:0; box-shadow:var(--shadow); transform:translateX(-100%); transition:transform .25s ease; } .sf-dash[data-mobile-open="1"] .sf-aside{ transform:translateX(0); } .sf-dash .sf-content{ margin-left:0; padding:18px; padding-top:12px; padding-bottom: calc(var(--bb-h) + env(safe-area-inset-bottom, 0px) + 12px); /* despega del bottom bar */ } .sf-dash .sf-tab{ display:none; } /* sin solapita en móvil */ } /* Overlay móvil */ .sf-dash .sf-ov{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:999;} .sf-dash[data-mobile-open="1"] .sf-ov{display:block;} /* ===== Bottom Bar (móvil) ===== */ .sf-dash .sf-bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:998; /* debajo del overlay para poder cerrarlo */ height:var(--bb-h); background:#fff; border-top:1px solid var(--border); display:grid; grid-template-columns: repeat(5, 1fr); align-items:center; justify-items:center; padding:6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); box-shadow:0 -10px 30px rgba(2,6,23,.06); } @media (min-width: 769px){ .sf-dash .sf-bottombar{ display:none; } } .sf-dash .sf-bbtn{ width:48px; height:44px; border-radius:14px; display:grid; place-items:center; text-decoration:none; border:1px solid transparent; color:#0f172a; background:transparent; cursor:pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .sf-dash .sf-bbtn .dashicons{ font-size:22px; line-height:1; } .sf-dash .sf-bbtn:active{ transform: translateY(1px); } .sf-dash .sf-bbtn:hover{ background:var(--hover); } /* Slots vacíos si no hay suficientes atajos */ .sf-dash .sf-bbtn--empty{ opacity:0; pointer-events:none; } /* Botón central FAB */ .sf-dash .sf-bbtn--main{ width:58px; height:58px; border-radius:20px; margin-top:-18px; background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; border:none; box-shadow:0 8px 24px rgba(37,99,235,.26); } .sf-dash .sf-bbtn--main:hover{ filter:saturate(1.05); box-shadow:0 10px 26px rgba(37,99,235,.30); } .sf-dash .sf-bbtn--main .dashicons{ font-size:22px; } /* ===== Modal de contraseña ===== */ .sf-pass-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); align-items:center; justify-content:center; z-index:1200; } .sf-pass-modal[aria-hidden="false"]{ display:flex; } .sf-pass-box{ background:#fff; padding:28px 24px; border-radius:16px; width:92%; max-width:360px; box-shadow:var(--shadow); text-align:center; } .sf-pass-box h2{ margin:0 0 10px; font-size:18px; } .sf-pass-box input{ width:140px; text-align:center; font-size:24px; letter-spacing:8px; padding:8px; border:1px solid #e5e7eb; border-radius:8px; } .sf-pass-box button{ margin-top:12px; background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; border:none; padding:10px 20px; border-radius:10px; font-weight:700; cursor:pointer; } .sf-pass-error{ color:#dc2626; font-size:12px; margin-top:8px; } /* ====================================================================== CEBRA · CORE UNIFICADO — HOJA DE ESTILO CB v4.3.1 · combos mobile + textarea + date input (icono a derecha, sin D/M/A) ====================================================================== */ /* ========================= * 1) TOKENS Y TEMA * ========================= */ @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;600;700;800;900&display=swap'); :root{ /* Tema base */ --accent:#2563eb; --accent-dark:#1d4ed8; --danger:#dc2626; --ok:#16a34a; --ok-dark:#15803d; /* Derivados y estados */ --accent-hov: color-mix(in srgb, var(--accent) 88%, #000 12%); --accent-press: color-mix(in srgb, var(--accent) 76%, #000 24%); --warn:#f59e0b; --warn-dark: color-mix(in srgb, var(--warn) 86%, #000 14%); --danger-dark: color-mix(in srgb, var(--danger) 86%, #000 14%); /* Tipografía y escala */ --text:#111827; --muted:#6b7280; --border:#e5e7eb; --hover:#f3f4f6; --radius:14px; --font-sans: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-size: 16px; --line: 1.5; /* Campos y botones */ --field-h: 46px; --cb-btn-py: 8px; --cb-btn-px: 16px; --cb-btn-fs: 13px; --cb-btn-radius: 10px; --cb-btn-icon: 36px; --cb-btn-icon-fs: 15px; /* Tabla */ --cb-th-bg: var(--hover); --cb-cell-py: 10px; --cb-cell-px: 12px; --cb-table-fs: 14px; --cb-col-min: 120px; --cb-col-min-field: 200px; --cb-col-tight: 72px; --thead-h: 44px; --row-h: 46px; /* Carga (overlay + skeleton) */ --cb-loading-bg: rgba(255,255,255,.75); --cb-skeleton: #f3f4f6; --cb-skeleton-ink: #e5e7eb; --cb-spin-w: 2px; /* Toasts */ --toast-bg:#111827; --toast-fg:#fff; --toast-ok:#065f46; --toast-warn:#92400e; --toast-err:#7f1d1d; /* Modales y tabs */ --cb-modal-dur: 260ms; --cb-modal-ease: cubic-bezier(.22,.61,.36,1); --tab-dur: 260ms; --tab-ease: cubic-bezier(.22,.61,.36,1); /* Espaciados y capas */ --stack-gap: 18px; --z-sticky: 5; --z-toast: 10000; --z-dropdown: 10060; /* Combobox */ --cb-combo-gap: 6px; --cb-combo-max-h: 240px; /* Textarea */ --cb-textarea-min-h: 140px; --cb-textarea-max-h: min(50vh, 520px); --cb-textarea-line: 1.45; /* Afijos de input (iconos a la derecha) */ --cb-input-affix-w: 40px; /* Date input */ --cb-date-icon-w: var(--cb-input-affix-w); /* Gutter móvil */ --page-gutter: 16px; } /* ========================= * 2) BASE / RESET * ========================= */ html, body { width:100%; max-width:100%; overflow-x:hidden; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } html, body, button, input, select, textarea { font-family: var(--font-sans) !important; font-size: var(--font-size); line-height: var(--line); } .cb-root, .cb-card{ font-family: var(--font-sans); color: var(--text); } .cb-root{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [hidden], .cb-card[hidden]{ display:none!important; } /* Accesibilidad: focus consistente */ :where(.cb-root, .cb-card) :focus-visible{ outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; border-radius: 8px; } /* Checkboxes al color del tema */ .cb-root input[type="checkbox"]:not([role="switch"]), .cb-card input[type="checkbox"]:not([role="switch"]){ accent-color: var(--accent); } /* ========================= * 3) CARDS / BLOQUES * ========================= */ .cb-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom: var(--stack-gap); overflow: visible; } .cb-title{ font:800 22px/1.2 var(--font-sans); margin:0 0 18px; letter-spacing:.2px; } .cb-header{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 18px; overflow:visible; } .cb-header .cb-title{ margin:0; } .cb-push{ margin-left:auto; } .cb-stack > * + *{ margin-top: var(--stack-gap); } /* ========================= * 4) BOTONES * ========================= */ .cb-btn, .cb-btn.nohover{ display:inline-flex!important; align-items:center!important; justify-content:center!important; background:var(--accent)!important; color:#fff!important; border:none!important; padding:var(--cb-btn-py) var(--cb-btn-px)!important; font:700 var(--cb-btn-fs)/1.1 var(--font-sans)!important; border-radius:var(--cb-btn-radius)!important; cursor:pointer!important; text-decoration:none!important; line-height:1!important; transition:transform .08s ease, box-shadow .2s ease, background .15s ease; gap:.55em; touch-action:manipulation; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); } .cb-btn:hover{ background:var(--accent-hov)!important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); } .cb-btn:active{ background:var(--accent-press)!important; transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.08); } .cb-btn.sec{ background:#fff!important; color:var(--text)!important; border:1px solid var(--border)!important; } .cb-btn.sec:hover{ background:color-mix(in srgb, var(--accent) 10%, #fff 90%)!important; color:var(--accent)!important; } .cb-btn.warn{ background:var(--warn)!important; color:#fff!important; } .cb-btn.warn:hover{ background:var(--warn-dark)!important; } .cb-btn.danger{ background:var(--danger)!important; color:#fff!important; } .cb-btn.danger:hover{ background:var(--danger-dark)!important; } .cb-btn.success{ background:var(--ok)!important; color:#fff!important; } .cb-btn.success:hover{ background:var(--ok-dark)!important; } .cb-btn:disabled{ opacity:.6!important; cursor:not-allowed!important; transform:none; box-shadow:none; } .cb-pill{ border-radius:999px!important; } .cb-btn--sm{ --cb-btn-py:6px; --cb-btn-px:12px; --cb-btn-fs:12px; } .cb-btn--lg{ --cb-btn-py:12px; --cb-btn-px:20px; --cb-btn-fs:15px; } .cb-btn.only-icon{ width:var(--cb-btn-icon)!important; height:var(--cb-btn-icon)!important; padding:0!important; gap:0; font-size:0; line-height:1; } .cb-btn i{ margin:0!important; line-height:1!important; pointer-events:none!important; font-size:var(--cb-btn-icon-fs); } /* Botones icon-only en celdas */ .cb-actions .cb-btn.only-icon{ width:34px!important; height:34px!important; padding:0!important; border-radius:8px!important; } /* ========================= * 5) ESTADO DE CARGA * ========================= */ @keyframes cb-spin { to { transform: rotate(360deg); } } @keyframes cb-shimmer { to { background-position: 240px 0, 0 0; } } .cb-card, .cb-block, .cb-panel { position: relative; } .cb-card[aria-busy="true"], .cb-block[aria-busy="true"], .cb-panel[aria-busy="true"]{ --_blur:.5px; } .cb-card[aria-busy="true"] > *, .cb-block[aria-busy="true"] > *, .cb-panel[aria-busy="true"] > *{ opacity:.35; } .cb-card[aria-busy="true"]::after, .cb-block[aria-busy="true"]::after, .cb-panel[aria-busy="true"]::after{ content:""; position:absolute; inset:0; background: var(--cb-loading-bg); backdrop-filter: blur(var(--_blur)); border-radius: var(--radius); z-index: var(--z-toast); } .cb-card[aria-busy="true"]::before, .cb-block[aria-busy="true"]::before, .cb-panel[aria-busy="true"]::before{ content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border: var(--cb-spin-w) solid var(--accent); border-right-color: transparent; animation: cb-spin .75s linear infinite; z-index: calc(var(--z-toast) + 1); } /* Skeleton en tablas */ .cb-table { position: relative; } .cb-table thead th{ height: var(--thead-h); } .cb-table tbody tr{ height: var(--row-h); } .cb-table[aria-busy="true"] tbody { opacity:0; } .cb-table[aria-busy="true"]::after{ content:""; position:absolute; left:0; right:0; top: var(--thead-h); bottom: 0; background: linear-gradient(90deg, transparent 0, rgba(0,0,0,.05) 50%, transparent 100%) 0/240px 100%, repeating-linear-gradient(transparent 0, transparent var(--row-h), var(--cb-skeleton-ink) var(--row-h), var(--cb-skeleton-ink) calc(var(--row-h) + 1px)); animation: cb-shimmer 1.2s infinite linear; z-index: 9999; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } /* Spinner en botones ocupados */ .cb-btn[aria-busy="true"]{ position:relative; pointer-events:none; } .cb-btn[aria-busy="true"] > .cb-btn__label{ opacity:0; } .cb-btn[aria-busy="true"]::after{ content:""; position:absolute; left:50%; top:50%; width:1em; height:1em; margin:-.5em 0 0 -.5em; border-radius:50%; border: 2px solid currentColor; border-right-color: transparent; animation: cb-spin .75s linear infinite; } /* ========================= * 6) UTILIDADES * ========================= */ .cb-tar{ text-align:right!important; } .cb-scroll-x{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; } .cb-no-truncate{ max-width:none!important; white-space:normal!important; overflow:visible!important; } .cb-actions--wrap{ flex-wrap:wrap!important; justify-content:center!important; } .cb-negative{ color:var(--danger)!important; } .cb-positive{ color:var(--ok)!important; } .cb-sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* ========================= * 7) FORMULARIOS + SEARCHBAR * ========================= */ .cb-field{ display:block; margin-bottom:16px; } .cb-field > label{ display:block; margin-bottom:6px; font:700 13.5px/1.2 var(--font-sans); color:var(--text); } label.cb-field{ display:block; font:700 13.5px/1.2 var(--font-sans); color:var(--text); } /* Mantener separación uniforme (incluye date-wrap) */ label.cb-field > :is(input, select, textarea, .cb-input, .cb-select, .cb-combo, .cb-date-wrap){ display:block; margin-top:6px; } .cb-field small, .cb-help{ display:block; margin-top:4px; color:var(--muted); font-size:12.5px; } /* Inputs/selects base */ .cb-input, .cb-select{ width:100%!important; min-width:0; box-sizing:border-box; height:var(--field-h); padding:0 12px!important; font-size:16px!important; border:1px solid var(--border)!important; border-radius:10px!important; background:#fff; line-height:1.2; transition:border-color .2s ease, box-shadow .2s ease; color:var(--text); } .cb-input::placeholder{ color:var(--muted); } .cb-input:focus, .cb-select:focus{ outline:none; border-color:var(--accent)!important; box-shadow:0 0 0 2px rgba(37,99,235,.14); } .cb-input[readonly], .cb-select[readonly], .cb-input:disabled, .cb-select:disabled{ background:#f9fafb; color:#9ca3af; } /* ▼ Mejora flecha del