:root{

--body-bg:#ffffff;
--text-main:#1c1c1c;
--text-secondary:#555;

--primary-color:#007bff;
--link-color:#007bff;

--header-bg:#ffffff;
--footer-bg:#f5f5f5;

--card-bg:#ffffff;
--sidebar-bg: #f8f9fa;
--border-color:#e5e7eb;

--input-bg:#ffffff;
--input-text:#1c1c1c;
--placeholder-color:#8a8a8a;

--header-height:80px;
--header-shadow: rgba(0,0,0,0.08);

/* Variables de la landing (cada tema las redefinie) */
--landing-bg:#ffffff;
--landing-text:#1c1c1c;

/* 🔗 ALIASES BOOTSTRAP ↔ TEMA (Fase 1.3)
   Bootstrap pinta sus componentes con sus propias variables fijas
   (p. ej. .card usa --bs-card-color → #212529). Aliasing esas variables
   a las nuestras hace que TODO componente Bootstrap siga el tema
   automáticamente: cards, tablas, modales, formularios…
   Regla de disciplina: si algo no sigue el tema, no se le pone color
   a mano — se agrega aquí el alias que falte. */
--bs-body-color: var(--text-main);
--bs-card-color: var(--text-main);
--bs-border-color: var(--border-color);
--bs-secondary-color: var(--text-secondary);
--bs-emphasis-color: var(--text-main);

/* Superficies sutiles de Bootstrap (bg-body-tertiary en formularios y
   celdas): sin este alias quedaban claras en tema oscuro (bug detectado
   por Enil en el modal de cortes, 2026-10-24). Bootstrap pinta esa clase
   con la TRIPLETA --bs-tertiary-bg-rgb (no con el hex); cada tema define
   la suya igual a su --sidebar-bg: claro #f8f9fa (default Bootstrap). */
--bs-tertiary-bg: var(--sidebar-bg);
--bs-tertiary-bg-rgb: 248, 249, 250;

--bs-primary: var(--primary-color);
--bs-body-bg: #ffffff;
--bs-table-color: #1c1c1c;

color-scheme: light;

}

/* BODY */

body{
background:var(--body-bg);
color:var(--text-main);
font-family:"Inter", Arial, sans-serif;
margin:0;
padding:0;
}

/* HEADER BASE */

header{
width:100%;
z-index:1000;
position:fixed;
top:0;
background: var(--header-bg);
backdrop-filter:blur(6px);
box-shadow:0 2px 10px var(--header-shadow);
transition:all .3s ease;
}

/* HEADER EN HOME */

.home-page header{
background: color-mix(in srgb, var(--header-bg) 80%, transparent);
}

/* HEADER EN PAGINAS GENERALES */

.inner-page header{
background: color-mix(in srgb, var(--header-bg) 80%, transparent);
}

/* OFFSET PARA QUE HEADER NO TAPE CONTENIDO */

.inner-page main{
padding-top:var(--header-height);
}

/* COLORES DE LETRA PARA HEADER */

.navbar-brand,
.navbar-nav .nav-link{
color: var(--text-main);
}

.navbar-nav .nav-link:hover{
opacity:0.8;
}

/* FOOTER */

footer{
background:var(--footer-bg);
}

/* BOTONES */

.btn-primary{
background:var(--primary-color);
border-color:var(--primary-color);
color:#fff;
}

.btn-primary:hover,
.btn-primary:focus{
background:var(--primary-color);
border-color:var(--primary-color);
filter:brightness(1.1);
}

.btn-outline-primary{
color:var(--primary-color);
border-color:var(--primary-color);
}

.btn-outline-primary:hover{
background:var(--primary-color);
border-color:var(--primary-color);
}

/* CARDS */

.card{
background:var(--card-bg);
border:1px solid var(--border-color);
color:var(--text-main);
}

/* INPUTS Y FORMULARIOS */

.form-control{
background:var(--input-bg);
color:var(--input-text);
border:1px solid var(--border-color);
}

.form-control::placeholder{
color:var(--placeholder-color);
opacity:0.7;
}

.form-label{
color:var(--text-secondary);
}

.form-control:focus {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border-color);
    box-shadow: none;
}

/* LINKS */

a{
color:var(--link-color);
text-decoration:none;
}

a:hover{
opacity:0.8;
}

/* 🎨 LANDING (Fase 1.3)

   El contenido de la landing usa estas variables en vez de colores fijos:
   el tema oscuro conserva el look #121212 original, el claro es suave y
   el tema custom deriva de los colores del inquilino. */

.landing-shell{
background:var(--landing-bg);
color:var(--landing-text);
min-height:100vh;
}

/* Texto secundario themeable (reemplaza a text-secondary/text-muted
   de Bootstrap en nuestras plantillas) */

.text-soft{
color:var(--text-secondary);
}