/* ===== Theme corporativo (variables + UI base) ===== */ :root { /* Marca */ --primary: #3B82F6; --primary-hover: #2563EB; /* Estructura */ --secondary: #111827; --secondary-2: #1F2937; /* Texto y fondos */ --text: #111827; --muted: #6B7280; --border: #E5E7EB; --background: #FFFFFF; --background-2: #F3F4F6; --light: #F9FAFB; /* Estados */ --success: #10B981; --danger: #EF4444; --warning: #FACC15; /* Softs */ --success-soft: rgba(16,185,129,.12); --danger-soft: rgba(239,68,68,.12); --warning-soft: rgba(250,204,21,.18); --info-soft: #EEF2FF; /* Tipografía / radios / sombras */ --ff-base: ui-sans-serif, system-ui, -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"; --radius: .5rem; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 6px 18px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); --dt-row-hover: #F9FAFB; } /* Modo oscuro (activar con ) */ html[data-theme="dark"] { --text: #F9FAFB; --muted: #CBD5E1; --border: #334155; --background: #111827; --background-2: #1F2937; --light: #111827; --secondary: #0F172A; --secondary-2: #1F2937; --dt-row-hover: rgba(255,255,255,.04); --success-soft: rgba(16,185,129,.18); --danger-soft: rgba(239,68,68,.18); --warning-soft: rgba(250,204,21,.24); } /* Base */ body { background: var(--background-2); color: var(--text); font-family: var(--ff-base); } /* Navbar */ .ui-navbar { background: var(--secondary); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-sm); } .ui-brand { color: #fff !important; font-weight: 700; text-decoration: none; } .ui-navlink { color: #e5e7eb !important; font-weight: 500; } .ui-navlink:hover, .ui-navlink.is-active { color: var(--primary) !important; } /* Botones */ .ui-btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: .5rem; padding: .5rem .8rem; border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none !important; } .ui-btn.-primary { background: var(--primary); border-color: var(--primary); color: #fff !important; } .ui-btn.-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .ui-btn.-secondary { background: var(--secondary-2); border-color: var(--secondary-2); color: #fff !important; } .ui-btn.-ghost { background: transparent; color: var(--text) !important; border-color: var(--border); } .ui-btn.-ghost:hover { background: var(--background-2); } .ui-btn.-sm { padding: .35rem .6rem; font-size: .9rem; } .ui-btn.-lg { padding: .7rem 1.05rem; } /* Cards */ .ui-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: var(--shadow-sm); overflow: hidden; } .ui-card-header { background: var(--secondary-2); color: #fff; font-weight: 600; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .ui-card-body { padding: 1rem; } /* Tablas */ .table tbody tr:hover { background: var(--dt-row-hover); }