/* =====================================================================
   PALETA DE MARCA — A+Partners Architects
   Negro/Carbón + Gris + Rojo + Blanco, tomados directo del logo.
   Nota de diseño (psicología del color):
   - El NEGRO/CARBÓN es el color estructural dominante (sidebar, títulos):
     transmite seriedad, solidez y profesionalismo — apropiado para una
     firma de arquitectura.
   - El ROJO de marca se reserva para lo que de verdad importa: botones de
     acción principal (Guardar, Entregar, Confirmar), el indicador de
     sección activa, y alertas. Usarlo en todas partes le quitaría fuerza
     y cansaría la vista — por diseño, aparece poco pero se nota.
   - El GRIS es el color de apoyo/neutral: textos secundarios, bordes,
     fondos suaves — mantiene la interfaz limpia sin competir con el rojo.
   - El BLANCO domina los fondos para que la interfaz se sienta ordenada,
     ligera y fácil de escanear visualmente.
   Los colores de estado (verde/naranja/azul) se mantienen tal cual para
   disponibilidad, alertas y roles — son códigos de color funcionales que
   el usuario ya aprendió (verde=bien, naranja=atención, azul=info) y
   cambiarlos reduciría la usabilidad, no la marca.
   ===================================================================== */
:root{
  --negro:#262626;         /* estructura: sidebar, fondos oscuros */
  --negro2:#333333;        /* estructura: hover/activo sobre negro */
  --carbon:#373737;        /* texto principal, encabezados (tono exacto del logo) */
  --rojo:#BC1721;          /* rojo de marca (tono exacto del logo) — solo acciones importantes */
  --rojo-oscuro:#8F111A;   /* rojo de marca, hover */
  --gris:#585858;          /* gris de marca (tono exacto del logo) — texto secundario en fondo claro */
  --gris-claro:#ADADAD;    /* gris para texto secundario sobre fondo oscuro */
  --gris-borde:#E4E4E4;    /* bordes y separadores sutiles */
  --gris-fondo:#F4F4F4;    /* fondos suaves (hover de tabla, tarjetas alternas) */
  /* Colores funcionales — se mantienen para no perder legibilidad de estado */
  --orange:#f5a623;
  --green:#1fab5c;
  --red:#BC1721;           /* unificado con el rojo de marca */
  --blue:#2f80ed;
  --gray:#585858;          /* alias retrocompatible, usa el gris de marca */
  --bg:#F4F4F4;
  /* Alias retrocompatibles (el código interno sigue usando estos nombres de variable) */
  --navy:var(--negro);
  --navy2:var(--negro2);
  --purple:var(--rojo);
  --purple-dark:var(--rojo-oscuro);
  --pink:var(--rojo);
}

/* ===== Tipografia de marca (Montserrat, empaquetada localmente) ===== */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-Variable.ttf') format('truetype-variations'),
      url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

body{background:var(--bg);font-family:'Montserrat','Segoe UI',Roboto,Arial,sans-serif;font-size:15px;color:var(--carbon);}

/* ===== LAYOUT ===== */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:210px;background:var(--negro);color:#d6d6d6;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:1000;}
.sidebar-brand{text-align:center;padding:18px 14px;border-bottom:1px solid #3a3a3a;}
.sidebar-brand img.brand-logo{max-width:120px;height:auto;margin:0 auto;display:block;}
.sidebar-brand .name{font-weight:800;letter-spacing:1px;font-size:1rem;margin-top:8px;color:#fff;}
.sidebar-brand .sub{font-size:.7rem;color:var(--gris-claro);}
.obra-actual-badge{margin:0 14px 4px;padding:8px 10px;background:var(--negro2);border-radius:8px;color:#fff;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:6px;}
.obra-actual-badge i{color:var(--rojo);}
.cambiar-obra-link{display:block;margin:0 14px 14px;text-align:center;font-size:.72rem;color:var(--gris-claro);text-decoration:none;padding:4px;}
.cambiar-obra-link:hover{color:#fff;}
.sidebar nav{padding:14px 10px;}
.sidebar .nav-link{color:#c2c2c2;font-size:.92rem;padding:.65rem .8rem;border-radius:8px;margin-bottom:2px;display:flex;align-items:center;gap:10px;cursor:pointer;border-left:3px solid transparent;text-decoration:none;}
.sidebar .nav-link i{font-size:1.1rem;width:20px;text-align:center;}
.sidebar .nav-link:hover{background:var(--negro2);color:#fff;}
.sidebar .nav-link.active{background:var(--negro2);color:#fff;border-left:3px solid var(--rojo);}

.main-content{flex-grow:1;min-width:0;}
.topbar{background:#fff;border-bottom:1px solid var(--gris-borde);padding:14px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:900;}
.topbar .titulo-pantalla{font-size:.78rem;color:var(--gris);margin-top:2px;}
.topbar .bienvenido{font-size:.72rem;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;}
.topbar .nombre-usuario{font-weight:700;font-size:.95rem;color:var(--carbon);}

.icon-bubbles{display:flex;gap:10px;align-items:flex-end;}
.icon-bubble{display:flex;flex-direction:column;align-items:center;gap:2px;}
.icon-bubble .num{font-size:.72rem;font-weight:800;}
.icon-bubble .box{width:34px;height:30px;border-radius:6px;background:var(--gris-fondo);display:flex;align-items:center;justify-content:center;color:var(--carbon);font-size:1rem;border:1px solid var(--gris-borde);}
.avatar-circle{width:40px;height:40px;border-radius:50%;background:var(--negro);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0;}

.page-body{padding:20px;}

/* ===== KPI cards con barra de progreso ===== */
.kpi-card2{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 2px 10px rgba(20,20,20,.06);position:relative;height:100%;}
.kpi-card2 .kpi-top{display:flex;justify-content:space-between;align-items:flex-start;}
.kpi-card2 .kpi-titulo{font-size:.74rem;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.kpi-card2 .kpi-icono{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0;}
.kpi-card2 .kpi-monto{font-size:1.5rem;font-weight:800;margin:6px 0 2px;color:var(--carbon);}
.kpi-card2 .kpi-sub{font-size:.72rem;color:var(--gris);display:flex;justify-content:space-between;}
.kpi-card2 .progreso{height:5px;border-radius:4px;background:var(--gris-fondo);margin-top:8px;overflow:hidden;}
.kpi-card2 .progreso > div{height:100%;border-radius:4px;}

/* ===== Panel / tarjeta general ===== */
.card-panel{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(20,20,20,.06);padding:16px;}
.buscador-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;}

/* ===== Tabla (encabezado en negro de marca) ===== */
.tabla-morada{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem;}
.tabla-morada thead{background:var(--negro);color:#fff;}
.tabla-morada th{padding:10px 12px;text-align:left;font-weight:600;font-size:.78rem;}
.tabla-morada td{padding:9px 12px;border-bottom:1px solid var(--gris-borde);vertical-align:middle;color:var(--carbon);}
.tabla-morada tbody tr:hover{background:var(--gris-fondo);}
/* Encabezado fijo (como en Excel): el contenedor con scroll horizontal que
   envuelve la tabla (".table-responsive") también se vuelve, sin querer,
   el contenedor de scroll VERTICAL en cuanto se le pone overflow-x -- así
   que en vez de pelearnos contra eso, lo aprovechamos: le damos una altura
   máxima y dejamos que la tabla haga su propio scroll interno, con el
   encabezado pegado arriba de ESE contenedor (top:0). Esto evita un bug
   real de los navegadores donde "position:sticky" en <th> dentro de un
   contenedor con scroll horizontal, pero SIN alto fijo, calcula mal la
   posición y el encabezado termina apareciendo abajo del primer renglón. */
.table-responsive:has(.tabla-morada){max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.tabla-morada thead th{position:sticky;top:0;background:var(--negro);color:#fff;z-index:15;box-shadow:0 1px 0 rgba(255,255,255,.08);}
.btn-mini{font-size:.72rem;padding:3px 9px;border-radius:6px;}

/* ===== Donas en cuadricula ===== */
.dona-card{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 2px 10px rgba(20,20,20,.06);}
.dona-card h6{font-size:.78rem;font-weight:700;color:var(--carbon);margin-bottom:4px;}

/* ===== Botones grandes =====
   Convención de color por función (no solo por marca):
   - VERDE = accion principal/positiva de la pantalla (Guardar, Crear, Confirmar, Entrar).
   - ROJO  = accion delicada o irreversible (Eliminar, Borrar, Salida de material).
   - NEGRO/GRIS = accion neutral (Ver, Editar, Cancelar) — ni positiva ni peligrosa.
   El rojo de marca se reserva asi para lo que de verdad importa senalar. */
.btn-grande2{font-size:.95rem;padding:.65rem 1.1rem;border-radius:10px;font-weight:600;border:none;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.btn-morado{background:var(--green);} .btn-morado:hover{background:#178849;color:#fff;}
.btn-verde2{background:var(--green);color:#fff;} .btn-verde2:hover{color:#fff;background-color:#178849;}
.btn-rojo2{background:var(--rojo);color:#fff;} .btn-rojo2:hover{color:#fff;background-color:#96121a;}
.btn-naranja2{background:var(--orange);color:#1a1a1a;} .btn-naranja2:hover{color:#1a1a1a;background-color:#e0951a;}
.btn-gris2{background:var(--gris);color:#fff;} .btn-gris2:hover{color:#fff;background-color:#454545;}

/* ===== Tiles de accion rapida ===== */
.tile-accion{background:#fff;border-radius:14px;padding:1.3rem 1rem;text-align:center;box-shadow:0 2px 10px rgba(20,20,20,.07);text-decoration:none;color:var(--carbon);display:block;transition:transform .15s ease;}
.tile-accion:hover{transform:translateY(-4px);color:var(--negro);}
.tile-accion i{font-size:2.3rem;display:block;margin-bottom:.5rem;}

/* ===== Toggle switches ===== */
.form-check-input:checked{background-color:var(--green);border-color:var(--green);}
.form-check-input{width:2.4em;height:1.3em;}

/* ===== Formularios ===== */
.form-label{font-weight:600;font-size:.92rem;color:var(--carbon);}
.form-control,.form-select{font-size:1rem;padding:.6rem .85rem;border-radius:10px;}
.form-control:focus,.form-select:focus{border-color:var(--negro);box-shadow:0 0 0 .2rem rgba(38,38,38,.12);}
.badge-estado{font-size:.82rem;padding:.4rem .8rem;border-radius:20px;}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,#333333,#0d0d0d);}
.login-card{border-radius:18px;}
.login-card img.brand-logo{max-width:150px;height:auto;margin:0 auto 1rem;display:block;}
.logo-circle{width:76px;height:76px;background:var(--negro);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}

/* ===== Modal estilo referencia (Ajustes / Usuarios) ===== */
.modal-header-custom{background:var(--negro);color:#fff;border-radius:12px 12px 0 0;}
.btn-toolbar-color{border:none;border-radius:8px;padding:.55rem 1rem;font-weight:600;color:#fff;font-size:.82rem;}

/* Escaneo QR */
#qr-reader{width:100%;max-width:420px;margin:0 auto;border-radius:14px;overflow:hidden;}

@media(max-width:767px){
  .sidebar{position:fixed;left:-220px;transition:left .25s ease;height:100vh;}
  .sidebar.show{left:0;box-shadow:6px 0 20px rgba(0,0,0,.35);}
}

/* ===== Sobreescritura del azul por defecto de Bootstrap (primary) =====
   Bootstrap trae su propio azul para .btn-primary/.btn-outline-primary/etc.
   que no pasa por nuestras variables — se iguala aqui al rojo de marca para
   que TODO el sistema use una sola paleta consistente. */
.btn-primary,.btn-outline-primary:hover{background-color:var(--negro)!important;border-color:var(--negro)!important;color:#fff!important;}
.btn-outline-primary{color:var(--negro)!important;border:1.5px solid var(--negro)!important;}
.text-primary{color:var(--negro)!important;}
.bg-primary{background-color:var(--negro)!important;}
/* Eliminar/Borrar: mismo rojo exacto de marca en vez del rojo generico de Bootstrap */
.btn-danger,.btn-outline-danger:hover{background-color:var(--rojo)!important;border-color:var(--rojo)!important;color:#fff!important;}
.btn-outline-danger{color:var(--rojo)!important;border:1.5px solid var(--rojo)!important;}
.text-danger{color:var(--rojo)!important;}
.bg-danger{background-color:var(--rojo)!important;}

/* ===== Bug corregido: botones "outline" (contorno) combinados con clases
   como .btn-grande2 quedaban con texto BLANCO y SIN borde visible -- esa
   clase trae "border:none" fijo, así que aunque el color del borde se
   corrigiera, el estilo del borde seguía en "ninguno" (invisibles hasta
   pasar el mouse, que sí los pintaba bien vía Bootstrap). Aquí se usa el
   shorthand "border" completo (no solo border-color) con !important, para
   que SIEMPRE haya un contorno visible, sin depender de .btn-grande2 ni
   del orden del CSS, en cualquier botón outline presente o futuro. */
.btn-outline-secondary{color:var(--gris)!important;border:1.5px solid var(--gris)!important;}
.btn-outline-secondary:hover{background-color:var(--gris)!important;border-color:var(--gris)!important;color:#fff!important;}
.btn-outline-success{color:var(--green)!important;border:1.5px solid var(--green)!important;}
.btn-outline-success:hover{background-color:var(--green)!important;border-color:var(--green)!important;color:#fff!important;}
.btn-outline-warning{color:#b5790a!important;border:1.5px solid var(--orange)!important;}
.btn-outline-warning:hover{background-color:var(--orange)!important;border-color:var(--orange)!important;color:#1a1a1a!important;}
.btn-outline-info{color:#0b7285!important;border:1.5px solid #0b7285!important;}
.btn-outline-info:hover{background-color:#0b7285!important;border-color:#0b7285!important;color:#fff!important;}
.btn-outline-dark{color:var(--negro)!important;border:1.5px solid var(--negro)!important;}
.btn-outline-dark:hover{background-color:var(--negro)!important;border-color:var(--negro)!important;color:#fff!important;}