/* =========================
   PALETA DEL SISTEMA
========================= */

:root{

--color-primario:#343a40;
--color-secundario:#343a40;
--color-acento:#F4C430;

--color-fondo:#F5E6D3;
--color-metal:#8A8F98;
--color-texto:#2E2E2E;

/* estados */

--color-ok:#3FA34D;
--color-warning:#F4C430;
--color-error:#D64545;
--color-info:#3A7BD5;

}


/* =========================
   RESET
========================= */

*{
box-sizing:border-box;
margin:0;
padding:0;
}


/* =========================
   BODY
========================= */

body.bg-custom{

font-family:'Inter','Segoe UI',system-ui,sans-serif;

background:url('../img/sismabg.png') no-repeat center center fixed;
background-size:cover;

min-height:100vh;
padding-top:90px;

color:var(--color-texto);

}


/* =========================
   CONTENEDOR PRINCIPAL
========================= */

.main-container{

max-width:900px;
margin:auto;

background:rgba(255,255,255,0.95);

backdrop-filter:blur(6px);


box-shadow:0 10px 30px rgba(0,0,0,.3);

padding-bottom:30px;

}


/* =========================
   HEADER
========================= */

.header{

background:linear-gradient(
135deg,
var(--color-primario),
var(--color-secundario)
);

color:white;

padding:40px;

border-bottom:5px solid var(--color-acento);

}

.header h1,
.header h2,
.header h3,
.header h4{
margin-bottom:10px;
}


/* =========================
   NAVBAR
========================= */

.navbar{

background:var(--color-secundario);

border-bottom:4px solid var(--color-acento);

box-shadow:0 4px 12px rgba(0,0,0,.3);

}

.navbar-brand{

font-weight:600;
font-size:18px;
margin-left:10px;
color:white;

}


/* =========================
   FORMULARIOS
========================= */

form{
padding:25px 20px;
}

.form-label{
font-weight:600;
}

.form-control:focus,
.form-select:focus{

border-color:var(--color-acento);

box-shadow:0 0 0 0.2rem rgba(244,196,48,.25);

}


/* =========================
   BOTONES
========================= */

.btn-primary{

background:var(--color-acento);
border-color:var(--color-acento);
color:#2E2E2E;

font-weight:600;

}

.btn-primary:hover{

background:#d9aa1e;
border-color:#d9aa1e;

}


/* =========================
   TARJETAS
========================= */

.card-area{

background:white;

border-radius:18px;

padding:35px 20px;

text-align:center;

transition:.3s;

box-shadow:0 6px 18px rgba(0,0,0,0.2);

}

.card-area:hover{

transform:translateY(-6px) scale(1.03);

box-shadow:0 15px 35px rgba(0,0,0,0.35);

}

.card-area i{

font-size:48px;

color:var(--color-acento);

margin-bottom:15px;

}

.card-area h5{

font-weight:600;

color:var(--color-primario);

}

.card-link{
text-decoration:none;
}


/* =========================
   FOOTER
========================= */

.footer{

margin-top:40px;

padding:20px;

background:var(--color-secundario);

color:white;

text-align:center;

font-size:14px;

}

.footer small{
opacity:0.8;
}


/* =========================
   CONTENT
========================= */

.content{
padding:40px;
}

@media (max-width:768px){

.content{
padding:20px;
}

.container-fluid{
padding-left:12px;
padding-right:12px;
}

.card-body{
padding-left:0.9rem;
padding-right:0.9rem;
}

form{
padding:16px 12px;
}

}


/* =========================
   DASHBOARD
========================= */

.dashboard-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.dashboard-layout{

display:grid;

grid-template-columns:1fr 1.4fr;

gap:40px;

align-items:center;

}


/* =========================
   TARJETAS DASHBOARD
========================= */

.card-dashboard{

background:white;

border-radius:15px;

padding:25px;

text-align:center;

transition:.3s;

box-shadow:0 6px 18px rgba(0,0,0,0.2);

}

.card-dashboard:hover{

transform:translateY(-8px);

}

.card-dashboard i{

font-size:35px;

color:var(--color-acento);

margin-bottom:10px;

}


/* =========================
   ESTADOS
========================= */

.estado,
.badge-estado{
align-items:center;
border-radius:999px;
color:#fff;
display:inline-flex;
font-size:12px;
font-weight:600;
gap:0.35rem;
padding:4px 10px;
white-space:nowrap;
}

.estado-pendiente,
.badge-pendiente{
background:#a61c3c;
}

.estado-proceso,
.badge-proceso{
background:#17a2b8;
}

.estado-finalizado,
.badge-finalizado,
.badge-realizado{
background:#28a745;
}

.estado-cancelado,
.badge-cancelado,
.badge-pausada{
background:#2b2727;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

.dashboard-layout{
grid-template-columns:1fr;
}

.dashboard-grid{
grid-template-columns:1fr;
}

}


/* =========================
   PRINT
========================= */

@media print{

body *{
visibility:hidden;
}

#areaImpresion,
#areaImpresion *{
visibility:visible;
}

#areaImpresion{

position:absolute;

left:0;

top:0;

width:100%;

}

.btn,
.navbar{
display:none !important;
}

body{
background:white !important;
}

}

/* ================================
SIDENAV BASE
================================ */

#mainNav .navbar-sidenav {
background-color: #343a40;
}

/* enlaces del menú */

#mainNav .navbar-sidenav .nav-link {
color: #e5e7eb;
font-weight: 500;
}

/* iconos blancos */

#mainNav .navbar-sidenav .nav-link i {
color: #ffffff;
}

/* hover */

#mainNav .navbar-sidenav .nav-link:hover {
background-color: #374151;
color: #ffffff;
}

/* item activo */

#mainNav .navbar-sidenav .nav-link.active {
background-color: #0ea5e9;
color: white;
}


/* ================================
SUBMENÚ NORMAL
================================ */

#mainNav .navbar-sidenav .sidenav-second-level {
background-color: #343a40;
}

#mainNav .navbar-sidenav .sidenav-second-level a {
color: #e5e7eb;
padding-left: 30px;
}

#mainNav .navbar-sidenav .sidenav-second-level a:hover {
background-color: #374151;
color: white;
}


/* ================================
SUBMENU CUANDO SIDENAV ESTA COLAPSADO
================================ */

body.sidenav-toggled #mainNav .navbar-sidenav .nav-item:hover .sidenav-second-level{
background:#343a40;
}


body.sidenav-toggled #mainNav .navbar-sidenav .sidenav-second-level a {

color: #e5e7eb;
white-space: nowrap;

}

body.sidenav-toggled #mainNav .navbar-sidenav .sidenav-second-level a:hover {

background-color: #374151;
color: white;

}


/* ================================
ICONOS DEL SIDENAV
================================ */

.navbar-sidenav .nav-link i {
width: 22px;
text-align: center;
font-size: 16px;
color: white;
}


/* ================================
DIVISORES
================================ */

.navbar-sidenav hr{
border-color: rgba(255,255,255,0.15);
margin:6px 10px;
}

.navbar-sidenav .nav-link{
transition: all .15s ease;
}

#mainNav .sidenav-second-level li a{
color:white;
display:block;
padding:8px 20px;
}

#mainNav .sidenav-second-level li a:hover{
background:#374151;
color:white;
}

#mainNav .navbar-sidenav i{
color:white;
}

.submenu-link{
color:white;
}

.submenu-link:hover{
background:#374151;
}

/* ==========================
SUBMENU SIDENAV
========================== */

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a{

background-color:#343a40;
color:#ffffff;
padding:8px 20px;
}


/* hover */

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover{

background-color:#374151;
color:#ffffff;

}


/* iconos blancos */

#mainNav .navbar-sidenav i{
color:white;
}

/* ==========================
SUBMENU SIDENAV
========================== */

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a{

background-color:#343a40;
color:#ffffff;
padding:8px 20px;
}


/* hover */

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover{

background-color:#374151;
color:#ffffff;

}


/* iconos blancos */

#mainNav .navbar-sidenav i{
color:white;
}

#mainNav .navbar-sidenav .nav-link.active{
color:#ffffff !important;
font-weight:600;
}


/* =========================
TABLAS DEL SISTEMA
========================= */

#dataTable{
background:#fff;
border-radius:6px;
overflow:hidden;
}

/* encabezado */

#dataTable thead{
background:#3a3f44;
color:#fff;
font-weight:600;
}

#dataTable thead th{
border:none;
vertical-align:middle;
text-align:center;
}

/* filas */

#dataTable tbody tr{
transition:all .15s ease;
}

#dataTable tbody tr:hover{
background:#f5f7fa;
}

/* celdas */

#dataTable td{
vertical-align:middle;
font-size:14px;
}

/* iconos de acciones */

#dataTable td a{
font-size:16px;
margin:0 4px;
}

/* estado */

#dataTable td span.glyphicon{
font-size:13px;
}

/* bordes suaves */

.table-bordered td,
.table-bordered th{
border-color:#e4e7ea;
}

/* espacio inferior para evitar que el footer tape el contenido */
.content-wrapper{
padding-bottom:90px;
}

.container-fluid{
padding-left:20px;
padding-right:20px;
}

.card{
border:none;
box-shadow:0 2px 8px rgba(0,0,0,.08);
border-radius:6px;
}

.card-body{
padding-left:1.25rem;
padding-right:1.25rem;
}

.card-title{
font-size:16px;
font-weight:600;
color:#444;
}

.nav-link-text{
   color: white;
}

/* iconos menu lateral */

#mainNav .navbar-sidenav .nav-link i{
color:white;
}

/* iconos submenu */

#mainNav .sidenav-second-level li a i{
color:white;
}

#mainNav .sidenav-third-level li a i{
color:white;
}

/* =========================
FORMULARIO PREVENTIVA
========================= */

.card-preventiva {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.card-preventiva .card-header {
background: #fff;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.25rem;
}

.card-preventiva .card-body {
padding: 1.5rem;
}

.seccion-formulario {
background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}

.seccion-formulario h5 {
color: #313131;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}

.campo-label {
color: #5a5c69;
display: block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
margin-bottom: 0.45rem;
text-transform: uppercase;
}

.form-control-preventiva {
border: 1px solid #dbe4f0;
border-radius: 0.6rem;
box-shadow: none;
color: #4e5865;
min-height: 44px;
}

.form-control-preventiva:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.12);
}

textarea.form-control-preventiva {
min-height: 110px;
resize: vertical;
}

.acciones-formulario {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}

.btn-guardar-preventiva {
border-radius: 999px;
box-shadow: 0 0.3rem 0.8rem rgba(40, 167, 69, 0.18);
font-weight: 600;
padding: 0.7rem 1.4rem;
}

@media (max-width:768px){

.card-preventiva .card-body {
padding: 1rem;
}

.seccion-formulario {
padding: 1rem;
}

.acciones-formulario {
justify-content: stretch;
}

.btn-guardar-preventiva {
width: 100%;
}

}

/* =========================
FORMULARIO SOLICITUD
========================= */

.card-solicitud-form {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.card-solicitud-form .card-header {
background: #fff;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.25rem;
}

.card-solicitud-form .card-body {
padding: 1.5rem;
}

.seccion-solicitud {
background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}

.seccion-solicitud h5 {
color: #313131;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}

.form-control-solicitud {
border: 1px solid #dbe4f0;
border-radius: 0.6rem;
box-shadow: none;
color: #4e5865;
min-height: 44px;
}

.form-control-solicitud:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.12);
}

textarea.form-control-solicitud {
min-height: 120px;
resize: vertical;
}

.acciones-solicitud {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}

.btn-guardar-solicitud {
border-radius: 999px;
box-shadow: 0 0.3rem 0.8rem rgba(78, 115, 223, 0.18);
font-weight: 600;
padding: 0.7rem 1.4rem;
}

.alerta-solicitud {
background: linear-gradient(135deg, #fff7df 0%, #fff 100%);
border: 1px solid #ffe08a;
border-radius: 0.75rem;
color: #7a5a00;
padding: 1.5rem;
}

.alerta-solicitud h4 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
}

.alerta-solicitud p {
margin-bottom: 0;
}

@media (max-width:768px){

.card-solicitud-form .card-body {
padding: 1rem;
}

.seccion-solicitud {
padding: 1rem;
}

.acciones-solicitud {
justify-content: stretch;
}

.btn-guardar-solicitud {
width: 100%;
}

}

/* =========================
FORMULARIO SELECCION
========================= */

.card-seleccion {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.seccion-seleccion {
background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}

.seccion-seleccion h5 {
color: #313131;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}

.resumen-seleccion {
color: #4e5865;
font-size: 0.98rem;
}

.meta-seleccion {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
color: #5a5c69;
font-size: 0.88rem;
}

.grid-seleccion {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.campo-seleccion {
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1rem;
}

.campo-seleccion--full {
grid-column: 1 / -1;
}

.campo-seleccion__label {
color: #5a5c69;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.campo-seleccion__valor {
color: #313131;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}

.btn-cancelar-seleccion {
border-radius: 999px;
font-weight: 600;
padding: 0.7rem 1.4rem;
}

.card-orden-trabajo {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.seccion-orden {
background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}

.seccion-orden h5 {
color: #313131;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}

.card-editar-bien {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.seccion-bien {
background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}

.seccion-bien h5 {
color: #313131;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}

.card-historial-bien {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
}

.tabla-historial-bien {
margin-bottom: 0;
min-width: 1100px;
}

.tabla-historial-bien thead th {
background: #f8f9fc;
border-top: 0;
border-bottom: 1px solid #e3e6f0;
color: #5a5c69;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}

.tabla-historial-bien td {
border-color: #edf0f5;
color: #4e5865;
vertical-align: middle;
}

.tabla-historial-bien tbody tr:hover {
background: #f8fbff;
}

@media (max-width:768px){

.seccion-seleccion {
padding: 1rem;
}

.seccion-orden {
padding: 1rem;
}

.seccion-bien {
padding: 1rem;
}

.tabla-historial-bien {
min-width: 100%;
}

.tabla-historial-bien thead {
display: none;
}

.tabla-historial-bien,
.tabla-historial-bien tbody,
.tabla-historial-bien tr,
.tabla-historial-bien td {
display: block;
width: 100%;
}

.tabla-historial-bien tbody tr {
background: #fff;
border: 1px solid #e3e6f0;
border-radius: 0.75rem;
box-shadow: 0 0.125rem 0.25rem rgba(58, 59, 69, 0.08);
margin-bottom: 1rem;
overflow: hidden;
padding: 0.75rem;
}

.tabla-historial-bien td {
align-items: center;
border: 0;
border-bottom: 1px solid #edf0f5;
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
text-align: right;
}

.tabla-historial-bien td:last-child {
border-bottom: 0;
padding-bottom: 0;
}

.tabla-historial-bien td::before {
color: #5a5c69;
content: attr(data-label);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
padding-right: 1rem;
text-align: left;
text-transform: uppercase;
}

.meta-seleccion {
flex-direction: column;
gap: 0.45rem;
}

.grid-seleccion {
grid-template-columns: 1fr;
}

.btn-cancelar-seleccion {
width: 100%;
margin-bottom: 0.75rem;
}

}