/* ============================================================
   Diseño moderno — páginas públicas dinámicas (colores CONAFIPS)
   Teal #16A0A0 · Morado #5A417C · Amarillo #F4C60D
   ============================================================ */
:root{
    --teal:#16A0A0; --purple:#5A417C; --yellow:#F4C60D;
    --ink:#2b2b3a; --muted:#7a7a86; --bg:#eef0f4; --card:#fff; --line:#e7e8ee;
}
body{ background:var(--bg); color:var(--ink); }

/* Tarjetas / cajas */
.box{ margin-bottom:24px; }
.box-header.well{
    background:var(--card) !important; border:0 !important;
    border-bottom:1px solid var(--line) !important; box-shadow:none !important;
    border-radius:10px 10px 0 0; padding:14px 20px !important;
    height:auto !important; min-height:0 !important;
    display:flex; align-items:center;
}
.box-header h2{ font-size:18px; font-weight:700; margin:0 !important; color:var(--ink); float:none !important; line-height:1.3; white-space:normal; }
.box-header .box-icon{ margin-left:auto; float:none; }
.box-header h2 .glyphicon{ color:var(--teal); margin-right:6px; }
.box-content{
    background:var(--card); border-radius:0 0 10px 10px;
    box-shadow:0 2px 12px rgba(30,20,50,.07); padding:22px !important;
}

/* Valor y fecha destacados */
.dato-destacado{
    display:flex; align-items:center; gap:10px; padding:12px 16px; margin:10px 0;
    border-radius:10px; font-weight:700;
}
.dato-valor{ background:rgba(22,160,160,.10); color:var(--teal); }
.dato-fecha{ background:rgba(90,65,124,.10); color:var(--purple); }
.dato-destacado .glyphicon{ font-size:20px; }

/* ---------- Carrusel de fotos ---------- */
.carousel.slide{
    border-radius:12px; overflow:hidden;
    box-shadow:0 6px 22px rgba(30,20,50,.18); background:#0f0f14;
}
.carousel .carousel-inner .item{ background:#0f0f14; }
.carousel .carousel-inner .item img{
    width:100%; height:400px; object-fit:cover; display:block; margin:0 auto; cursor:zoom-in;
}
/* Popup de imagen ampliada */
#modal-foto .modal-body{ padding:0; background:#0f0f14; text-align:center; }
#modal-foto .modal-body img{ max-width:100%; max-height:82vh; margin:0 auto; }
/* Quitar el degradado feo de los controles y usar botones circulares */
.carousel-control{
    background:none !important; background-image:none !important;
    width:14%; opacity:1; text-shadow:none;
}
.carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next{
    width:46px; height:46px; line-height:46px; margin-top:-23px; font-size:20px;
    background:rgba(255,255,255,.9); color:var(--purple); border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.35); transition:background .15s, color .15s;
}
.carousel-control:hover .glyphicon{ background:var(--purple); color:#fff; }
.carousel-control.left .glyphicon{ left:12px; }
.carousel-control.right .glyphicon{ right:12px; left:auto; }
/* Indicadores */
.carousel-indicators li{ border-color:#fff; }
.carousel-indicators .active{ background:var(--yellow); border-color:var(--yellow); }

/* Botones grandes de acción */
.detalle-acciones .btn{ min-width:180px; margin:4px; }

/* ---------- Stepper (pasos de la postura) ---------- */
.stepper{ display:flex; gap:10px; margin:0 0 24px; }
.stepper .step{
    flex:1; display:flex; align-items:center; gap:10px; padding:14px 16px;
    background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(30,20,50,.06);
    color:#9aa0ab; font-weight:600; border:2px solid transparent;
}
.stepper .step .num{
    width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%;
    background:#e7e8ee; color:#9aa0ab; font-weight:700; flex-shrink:0;
}
.stepper .step.active{ color:var(--purple); border-color:var(--purple); }
.stepper .step.active .num{ background:var(--purple); color:#fff; }
.stepper .step.done{ color:var(--teal); }
.stepper .step.done .num{ background:var(--teal); color:#fff; }
@media(max-width:600px){ .stepper{ flex-direction:column; } }