/* ================================
   ECCOAISLA – Tema corporativo #9DBB3A
   ================================ */

/* 1) Paleta corporativa (tints/shades del #9DBB3A) */
:root{
  --brand-50:#f6faea;
  --brand-100:#eef5d5;
  --brand-200:#e2eeBE;
  --brand-300:#cbe08f;
  --brand-400:#b7cf69;
  --brand-500:#9dbb3a;  /* color corporativo */
  --brand-600:#86a431;
  --brand-700:#6e8c28;
  --brand-800:#5a741f;
  --brand-900:#465c18;

  /* Acentos conservadores */
  --accent-500:#71c19b;     /* éxito secundario (suave, combina con verde) */
  --warning-500:#f59e0b;
  --danger-500:#ef4444;
}

/* 2) Navbar y dropdowns al color corporativo */
.navbar.fondo-corporativo{
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
}
.dropdown-menu.fondo-corporativo{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

/* 3) Chips / título principal “Editar presupuesto” */
.row.mb-2 .col.bg-primary{
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500)) !important;
}

/* 4) Botones principales al corporativo */
.btn-primary{
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 6px 14px rgba(157,187,58,.25);
  border: none;
}
.btn-primary:hover{ filter:brightness(1.04); }

/* Botón fijo Guardar */
.fixed-bottom.btn{
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600)) !important;
  box-shadow: 0 18px 40px rgba(157,187,58,.35) !important;
}

/* 5) Estados de foco y enlaces */
a{ color: var(--brand-600); }
a:hover{ color: var(--brand-700); }
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 24%, transparent);
}

/* 6) Badges de estancias */
.badge-estancia{
  background: var(--brand-600) !important;
}

/* 7) Cabeceras de cada bloque en verde (manteniendo jerarquía) */
#bloque-presupuesto .card-header,
#bloque-presupuesto-ficha .card-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 65%, white), var(--brand-100)) !important;
  color: var(--brand-800);
}
#bloque-cliente .card-header,
#bloque-cliente-ficha .card-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 55%, white), var(--brand-100)) !important;
  color: var(--brand-800);
}
#bloque-servicios .card-header,
#bloque-servicios-ficha .card-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 45%, white), var(--brand-100)) !important;
  color: var(--brand-800);
}
#bloque-estado-actual .card-header,
#bloque-estado-actual-ficha .card-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 35%, white), var(--brand-50)) !important;
  color: var(--brand-800);
}
#bloque-condiciones .card-header{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 50%, white), var(--brand-50)) !important;
  color: var(--brand-800);
}

/* 8) Subpaneles informativos (antes azules/naranjas) → neutros con acento verde */
#bloque-servicios .card-body .small.text-start.border.rounded,
#bloque-servicios-ficha .card-body .small.text-start.border.rounded{
  background: linear-gradient(180deg, #f7fbf2, #f2f8ea);
  border-color: color-mix(in srgb, var(--brand-300) 35%, #e2e8f0);
}

/* Bloques “TOTAL PRESUPUESTO” (antes verdoso claro) */
.card-body[style*="#d3ffc7"]{
  background: linear-gradient(180deg, #f0f8e3, #e5f2cf) !important;
  border:1px solid color-mix(in srgb, var(--brand-300) 45%, #dce7c4) !important;
}

/* 9) Tipografía de importes y primarios al verde corporativo */
.small .fw-bold.text-primary,
.fw-bold.text-primary{
  color: var(--brand-700) !important;
}

/* 10) Controles/inputs menores */
.form-check-input:checked{
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

/* 11) Tarjetas internas de “Servicio” (cajas celestes) → neutro con acento */
#bloque-servicios .pb-2.rounded[style*="#eff9ff"],
#bloque-servicios-ficha .pb-2.rounded[style*="#eff9ff"]{
  background: linear-gradient(180deg, #f8fbf4, #f4f9ee) !important;
  border:1px solid color-mix(in srgb, var(--brand-300) 30%, #e2e8f0);
}

/* 12) Tablas: hover con tinte verde sutil */
.table-hover tbody tr:hover{
  background: color-mix(in srgb, var(--brand-200) 25%, white);
}

/* 13) Enviar (cabecera morada) → acento corporativo suave para coherencia */
.card-header[style*="#cfc2ff"]{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-200) 40%, white), var(--brand-100)) !important;
  color: var(--brand-800);
}

/* 14) Píldoras y etiquetas pequeñas */
.row .col.bg-primary.fs-5.text-center.text-white.p-1.rounded{
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500)) !important;
}

/* 15) Estados accesibles de foco global */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 24%, transparent);
  border-color: var(--brand-400);
}

/* Botones  */
/* ================================
   Botones de acción (Replicar / Descargar / Editar)
   ================================ */

.col.text-end a {
  display: inline-flex;            /* Para centrar icono vertical y horizontal */
  align-items: center;
  justify-content: center;
  width: 42px;                     /* Área clicable mayor */
  height: 42px;
  margin-right: .5rem !important;   /* separa los iconos */
  border-radius: 50%;              /* Botón redondo */
  background: var(--brand-500);    /* verde corporativo */
  color: #fff !important;          /* icono blanco */
  font-size: 1.2rem;               /* iconos un poco más grandes */
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: all .2s ease;
  text-decoration: none !important;
}

.col.text-end a:last-child {
  margin-right: 0 !important;
}

.col.text-end a:hover {
  background: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

.col.text-end a:active {
  transform: scale(.95);
}

/* Si quieres diferenciar por tipo de acción (opcional) */
.col.text-end a[title*="parte trabajo"] {
  background: var(--accent-500);     /* Éxito secundario */
}
.col.text-end a[title*="Editar presupuesto"] {
  background: var(--warning-500);    /* Aviso */
}

/* ================================
   NAVBAR Eccoaisla – estilo corporativo
   ================================ */

/* Fondo del navbar (si no lo tienes ya) */
.navbar.fondo-corporativo{
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  padding-top:.4rem;
  padding-bottom:.4rem;
}

/* Estilos base de los enlaces de nivel superior */
.navbar-nav > .nav-item > .nav-link{
  color: #fff !important;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .3px;
  padding: .6rem 1rem;
  border-radius: 6px;
  transition: all .2s ease;
}

/* Hover / activo */
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link.text-decoration-underline,
.navbar-nav > .nav-item > .nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  box-shadow: inset 0 -2px 0 var(--brand-500);
}

/* Subrayado verde más visible para el enlace “Nuevo” */
.navbar-nav > .nav-item > .nav-link.text-decoration-underline{
  text-decoration: none !important;
  position: relative;
}
.navbar-nav > .nav-item > .nav-link.text-decoration-underline::after{
  content:'';
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:3px;
  background: var(--brand-500);
  border-radius: 2px;
}

/* Dropdown toggles */
.navbar-nav .dropdown-toggle::after{
  margin-left:.4em;
}
.navbar-nav .dropdown-menu.fondo-corporativo{
  background: var(--brand-700);
  border:none;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  margin-top:.5rem;
  min-width: 200px;
}
.navbar-nav .dropdown-item{
  color:#fff;
  padding:.55rem 1rem;
  transition: background .2s ease;
}
.navbar-nav .dropdown-item:hover{
  background: var(--brand-500);
  color:#fff;
}

/* Ícono de usuario más grande y alineado */
.navbar-nav .fa-user{
  margin-right:.25rem;
  font-size:1.1rem;
}

/* Ajustes responsive */
@media (max-width: 991px){
  .navbar-nav > .nav-item > .nav-link{
    padding:.6rem .8rem;
  }
  .navbar-nav .dropdown-menu.fondo-corporativo{
    min-width:160px;
  }
}

/* ================================
   Tabla de Presupuestos – Acciones
   ================================ */

td.col-acciones a {
  display: inline-flex;             /* centra icono */
  align-items: center;
  justify-content: center;
  width: 38px;                      /* zona clicable mayor */
  height: 38px;
  margin-right: .4rem;
  border-radius: 50%;
  background: rgba(0,0,0,.08);       /* base neutra, luego sobrescribimos */
  color: #fff !important;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  text-decoration: none !important;
  transition: all .2s ease;
}

/* último enlace sin margen extra */
td.col-acciones a:last-child { margin-right: 0; }

/* Hover común */
td.col-acciones a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* ================================
   Tabla > columna Acciones (versión compacta)
   ================================ */

/* Mantén la columna estrecha y sin saltos de línea */
.table .col-acciones{
  white-space: nowrap;
  width: 1%;
  text-align: center;
}

/* Botones compactos dentro de la tabla */
/* ================================
   Tabla > columna Acciones – Botón 16px
   ================================ */

.table .col-acciones a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;              /* ⬅ tamaño solicitado */
  height: 16px;
  margin-right: .25rem;     /* separación pequeña */
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: #fff !important;
  font-size: .7rem;         /* icono proporcional */
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  text-decoration: none !important;
  transition: background .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
.table .col-acciones a:last-child{ margin-right: 0; }

.table .col-acciones a:hover{
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Colores por acción */
.table .col-acciones a[title*="Ver presupuesto"]{ background: var(--accent-500); }
.table .col-acciones a[title*="Editar presupuesto"]{ background: var(--brand-500); }
.table .col-acciones a[title*="parte trabajo"]{ background: #3b82f6; }
.table .col-acciones a[title*="eliminar"],
.table .col-acciones a.text-danger{ background: #ef4444; }

/* Iconos todavía más pequeños para que quepan bien */
.table .col-acciones a i{
  font-size: .65rem;
  line-height: 1;
}

/* Aumenta el área de clic solo cuando se usa teclado, para accesibilidad */
.table .col-acciones a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent);
  padding: 4px; /* halo de foco más amplio */
}