/*
 * Colores institucionales de la Cámara de Comercio y Producción de Puno,
 * extraídos directamente del logo (public/imagenes/logo-ccpp.png):
 *   Azul  #2E446B
 *   Verde #008360
 * Se cargan después de adminlte.min.css en cada layout para sobrescribir
 * los colores por defecto de AdminLTE/Bootstrap en los puntos clave de la
 * interfaz, sin modificar el AdminLTE original.
 */

/* Evita el scroll horizontal de toda la página: si algún elemento (tablas
   anchas, la línea de tiempo, etc.) se pasa del ancho de la pantalla en
   móviles/ventanas angostas, la barra superior (position: sticky, que solo
   fija la posición vertical) se desplaza hacia los lados junto con el resto
   de la página. Se desactivó temporalmente (sección 57) para diagnosticar
   el desborde real del navbar y se reactiva aquí una vez identificada y
   corregida la causa (width:100% redundante en .main-header.sticky-top). */
html,
body {
    overflow-x: hidden;
}

:root {
    --ccpp-azul: #2E446B;
    --ccpp-azul-oscuro: #202f4a;
    --ccpp-verde: #008360;
    --ccpp-verde-oscuro: #006a4d;
    --ccpp-gris-texto: #495057;
    --ccpp-gris-label: #5b6b82;
    --ccpp-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* Tipografía: Inter en toda la interfaz (pública y panel), en vez de la
   fuente por defecto de Bootstrap/AdminLTE. Si Google Fonts no carga, cae
   de vuelta a la misma pila de fuentes del sistema que ya se usaba. */
body,
.btn,
.form-control,
.custom-select,
input,
select,
textarea,
.navbar,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ccpp-font);
}

body {
    color: var(--ccpp-gris-texto);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Barra superior (sitio público y panel) */
.main-header.border-bottom {
    border-bottom: 3px solid var(--ccpp-verde) !important;
}

/* La barra pública reutiliza .main-header (pensada para el panel interno,
   con sidebar) + .sticky-top: al quedar fija arriba durante el scroll, sin
   esto el fondo se volvía transparente/traslúcido en la zona del logo y el
   contenido de abajo se veía encimado ahí. Se fuerza fondo sólido y un
   z-index por encima de cualquier tarjeta/overlay de la página. Sin
   width:100% explícito: es innecesario (un elemento sticky en bloque ya
   ocupa el 100% del ancho disponible por defecto) y es sospechoso de un
   posible desajuste de unos pocos píxeles que coincide con enlaces del
   navbar cortándose contra el borde derecho de la pantalla. */
.main-header.sticky-top {
    background-color: #fff !important;
    z-index: 1030;
}

/* El navbar público reutilizaba .container (ancho máximo y centrado) y
   varios ajustes de flexbox (flex-shrink/white-space/min-width) que se
   fueron acumulando para resolver problemas puntuales, pero terminaron
   interactuando entre sí de forma impredecible: el logo con margen en
   blanco a la izquierda y, sobre todo, "Consultar trámite" cortado contra
   el borde de la pantalla incluso en ventanas anchas, confirmado en Chrome
   y Edge (incluido modo incógnito, así que no era caché ni una extensión).
   Se simplificó todo a .container-fluid + .navbar-brand estándar de
   Bootstrap, sin overrides de flexbox — el patrón más probado y con menos
   piezas que puedan chocar entre sí. */
/* Bootstrap trae .navbar-expand-lg>.container-fluid{padding:0}, con más
   especificidad (2 clases) que una sola clase personalizada — por eso un
   intento anterior de darle padding al contenedor nunca ganaba. Aquí se
   usa un selector con 3 clases para garantizar que sí gane, dejando el
   logo pegado al borde izquierdo real y un poco de aire a la derecha para
   los enlaces/botón. Además, la clase base .navbar (aparte de
   .navbar-expand-lg) trae su propio padding:.5rem .5rem en el <nav>
   mismo — sin anular su padding-left también, seguía quedando un margen
   de sobra a la izquierda aunque el del contenedor ya estuviera en 0. */
.main-header.navbar-expand-lg {
    padding-left: 1rem;
}

.main-header.navbar-expand-lg>.container-fluid {
    padding-left: 0;
    padding-right: 1rem;
}

.navbar-brand {
    color: var(--ccpp-azul) !important;
    font-weight: 600;
}

.navbar-nav .nav-link {
    color: var(--ccpp-azul);
    font-weight: 500;
    padding-left: .65rem;
    padding-right: .65rem;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--ccpp-azul);
    border-bottom-color: var(--ccpp-verde);
}

/* Botones */
.btn-primary {
    background-color: var(--ccpp-azul);
    border-color: var(--ccpp-azul);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ccpp-azul-oscuro);
    border-color: var(--ccpp-azul-oscuro);
}

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

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

.btn-success {
    background-color: var(--ccpp-verde);
    border-color: var(--ccpp-verde);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--ccpp-verde-oscuro);
    border-color: var(--ccpp-verde-oscuro);
}

.btn-outline-success {
    color: var(--ccpp-verde);
    border-color: var(--ccpp-verde);
}

.btn-outline-success:hover {
    background-color: var(--ccpp-verde);
    border-color: var(--ccpp-verde);
}

/* Panel interno: sidebar */
.main-sidebar.sidebar-dark-primary {
    background-color: var(--ccpp-azul) !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-treeview>.nav-item>.nav-link.active {
    background-color: var(--ccpp-verde) !important;
}

/* Pie de página del sitio público */
.footer-institucional {
    margin-left: 0;
    background-color: #f8f9fa;
    border-top: 3px solid var(--ccpp-verde);
}

.footer-institucional a {
    color: var(--ccpp-azul);
}

.footer-institucional a:hover {
    color: var(--ccpp-verde);
    text-decoration: none;
}

/* Pie de página del panel interno (AdminLTE .main-footer) */
.main-footer {
    border-top: 3px solid var(--ccpp-verde) !important;
}

/* Login / registro / recuperar contraseña */
.login-box .card,
.register-card-body {
    border-top: 4px solid var(--ccpp-verde);
}

/* Utilidades de marca */
.text-primary {
    color: var(--ccpp-azul) !important;
}

.ccpp-logo {
    max-height: 44px;
    width: auto;
}

/* Tarjetas de "los 3 pasos" en la página de inicio: cada una lleva de
   fondo una de las imágenes institucionales (fondo1/2/3), cubierta con una
   capa blanca semitransparente (::before) para que el texto se lea bien
   sin importar el contenido/contraste de cada imagen. */
.paso-card {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 0;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
}

.paso-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, .87);
    transition: background-color .2s ease-in-out;
}

.paso-card .card-body {
    position: relative;
    z-index: 1;
}

/* Al pasar el cursor: la capa se oscurece y el ícono/título/texto pasan a
   blanco. Los !important son necesarios porque el ícono usa .text-primary
   y el párrafo .text-muted, que ya traen su propio !important. */
.paso-card:hover::before {
    background-color: rgba(20, 28, 43, .78);
}

.paso-card:hover .card-body i,
.paso-card:hover .card-body h5,
.paso-card:hover .card-body p {
    color: #fff !important;
    transition: color .2s ease-in-out;
}

.ccpp-logo-grande {
    max-height: 96px;
    width: auto;
}

/* Campos de formulario: labels y controles más cuidados en todo el sitio
   (público y panel), no solo en el formulario de trámites. */
label:not(.form-check-label) {
    font-weight: 600;
    font-size: .85rem;
    color: var(--ccpp-gris-label);
    letter-spacing: .01em;
    margin-bottom: .4rem;
}

.form-control,
.custom-select {
    border-radius: .4rem;
    border-color: #d7dbe0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* :not(.form-control-sm) para no agrandar los campos compactos de cada
   tarjeta de anexo, que ya traen su propio padding reducido. */
.form-control:not(.form-control-sm),
.custom-select:not(.form-control-sm) {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--ccpp-azul);
    box-shadow: 0 0 0 .2rem rgba(46, 68, 107, .15);
}

.form-control::placeholder {
    color: #adb5bd;
}

.form-text {
    font-size: .8rem;
}

/* Campos que se escriben en mayúsculas (asunto, nombres, apellidos,
   descripción de anexos): el texto real que se guarda también se convierte
   a mayúsculas por JavaScript (ver nuevo.php); esto solo evita que se vea
   en minúscula por una fracción de segundo antes de que corra el JS. */
.campo-mayuscula {
    text-transform: uppercase;
}

/* Formulario de presentación de trámites */
.tipo-persona-selector .form-check {
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: .6rem 1rem .6rem 2.25rem;
    margin-right: 1rem;
    background: #fff;
    transition: border-color .15s ease-in-out;
}

.tipo-persona-selector .form-check-input:checked~.form-check-label {
    font-weight: 600;
    color: var(--ccpp-azul);
}

/* Anexos: grilla de tarjetas de vista previa, al estilo Dropzone.js /
   jQuery File Upload, hecha con CSS/JS propios (sin librería nueva). */
.anexos-dropzone {
    position: relative;
    border: 2px dashed #adb5bd;
    border-radius: .35rem;
    background: #fff;
    margin-bottom: 1rem;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.anexos-dropzone.upload-dropzone--dragover {
    border-color: var(--ccpp-verde);
    background: #f0faf6;
}

.anexos-dropzone-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    color: #495057;
    font-size: .9rem;
    text-align: center;
}

.anexos-dropzone-label i {
    font-size: 1.3rem;
    color: var(--ccpp-verde);
}

.anexos-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: .75rem;
}

.anexo-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    background: #fff;
    padding: .75rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.anexo-card-quitar {
    order: 99;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f3f5;
    color: #6c757d;
    flex-shrink: 0;
}

.anexo-card-quitar:hover {
    background: #dc3545;
    color: #fff;
}

.anexo-card-preview {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 200px;
    min-width: 0;
}

.anexo-card-preview i {
    font-size: 1.6rem;
    color: #dc3545;
    flex-shrink: 0;
}

.anexo-card-info {
    min-width: 0;
}

.anexo-card-nombre {
    font-size: .82rem;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anexo-card-tamano {
    font-size: .75rem;
    color: #6c757d;
}

.anexo-card-campo-descripcion {
    flex: 1 1 220px;
}

.anexo-card-campo-folios {
    flex: 0 0 110px;
}

.anexo-card .form-group label {
    font-size: .78rem;
    color: #6c757d;
    margin-bottom: .15rem;
}

/* Panel de documentos (documento principal, anexos, enlace externo):
   diseño deliberadamente distinto al resto del formulario, para que se lea
   como "la parte de adjuntar archivos" de un vistazo. */
.docs-panel {
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #fff;
}

.docs-panel-header {
    background: var(--ccpp-azul);
    color: #fff;
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.docs-panel-header .step-numero,
.docs-panel-header .icono-encabezado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ccpp-verde);
    color: #fff;
    font-size: .85rem;
    margin-right: .65rem;
    flex-shrink: 0;
}

.docs-panel-body {
    padding: 1.75rem;
    background: #fafbfc;
}

/* Solo los campos "de primer nivel" del panel (no los de cada tarjeta de
   anexo, que ya traen su propio espaciado más compacto, ni los que ya
   marcan mb-0 a propósito por ser el último campo antes de cerrar el panel). */
.docs-panel-body>.form-group:not(.mb-0),
.docs-panel-body>.form-row>.form-group:not(.mb-0) {
    margin-bottom: 1.35rem;
}

.docs-panel-body hr {
    margin: 1.5rem 0;
    border-color: #e3e6ea;
}

/* Acordeón de preguntas frecuentes (página de inicio) */
.faq-item {
    border-bottom: 1px solid #e3e6ea;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.75rem;
    background: none;
    border: 0;
    text-align: left;
    font-weight: 600;
    color: var(--ccpp-azul);
    transition: background-color .15s ease-in-out;
}

.faq-pregunta:hover,
.faq-pregunta:focus {
    background-color: #fafbfc;
    outline: none;
}

.faq-pregunta i {
    flex-shrink: 0;
    margin-left: 1rem;
    color: var(--ccpp-verde);
    transition: transform .2s ease-in-out;
}

.faq-pregunta.collapsed i {
    transform: rotate(-90deg);
}

.faq-respuesta {
    padding: 0 1.75rem 1.25rem;
    color: var(--ccpp-gris-texto);
}

/* Campos de "Datos del trámite" (consulta pública de seguimiento): cada
   uno con un pequeño ícono a la izquierda, mismo lenguaje visual que las
   tarjetas de documento. */
.campo-dato {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.campo-dato-icono {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .4rem;
    background-color: #eef1f6;
    color: var(--ccpp-azul);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    margin-top: .1rem;
}

.campo-dato .min-width-0 {
    min-width: 0;
    flex-grow: 1;
}

/* Enlace externo: campo de texto de solo lectura (en vez de un enlace en
   línea, que se cortaba a media palabra o solo mostraba el dominio) — la
   URL completa se ve siempre, sin desbordar ni partirse, con un botón
   aparte para abrirla. */

/* Vista de seguimiento (resultado.php): versión más compacta de las
   tarjetas .docs-panel/.timeline/.documento-card — escopeada a esta
   página con .vista-seguimiento para no afectar el formulario de trámite
   ni las preguntas frecuentes de inicio, que reutilizan las mismas
   clases. */
.vista-seguimiento .docs-panel-header {
    padding: .6rem 1rem;
    font-size: .92rem;
}

.vista-seguimiento .docs-panel-header .step-numero {
    width: 1.4rem;
    height: 1.4rem;
    font-size: .72rem;
    margin-right: .5rem;
}

.vista-seguimiento .docs-panel-body {
    padding: 1.05rem 1.15rem;
    font-size: .88rem;
}

.vista-seguimiento .campo-dato-icono {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .72rem;
}

.vista-seguimiento label {
    font-size: .74rem !important;
    margin-bottom: .15rem !important;
}

.vista-seguimiento .documento-card {
    padding: .6rem .75rem;
    font-size: .85rem;
    gap: .6rem;
}

.vista-seguimiento .widget-estado {
    min-height: auto;
    padding: .35rem;
}

.vista-seguimiento .widget-estado .info-box-icon {
    width: 50px;
    font-size: 1.3rem;
}

.vista-seguimiento .widget-estado .info-box-number {
    font-size: 1.05rem;
}

.vista-seguimiento .documento-card-icono {
    width: 2rem;
    height: 2rem;
    font-size: .95rem;
}

.vista-seguimiento .timeline .timeline-header {
    font-size: .88rem;
    padding: .6rem .8rem;
}

.vista-seguimiento .timeline .timeline-body {
    padding: .6rem .8rem;
    font-size: .8rem;
}

.vista-seguimiento .timeline .time-label>span {
    font-size: .7rem;
    padding: .2rem .45rem;
}

.vista-seguimiento .timeline>div>.fas,
.vista-seguimiento .timeline>div>.far {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 13px;
    left: 16px;
}

.vista-seguimiento .timeline .timeline-item {
    margin-left: 50px;
}

/* Widget de estado del expediente, al principio del cuerpo de "Datos del
   trámite": el .info-box de AdminLTE tal cual (mismo componente que ya se
   usa para el ícono/color de cada evento de la línea de tiempo — mismas
   clases bg-primary/bg-warning/etc.), no una tarjeta propia. */
.widget-estado {
    box-shadow: none;
    border: 1px solid #e3e6ea;
}

.widget-estado .info-box-text {
    font-size: .78rem;
    color: var(--ccpp-gris-label);
    letter-spacing: .02em;
}

.widget-estado .info-box-number {
    font-size: 1.2rem;
}

.documento-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid #e3e6ea;
    border-radius: .5rem;
    background-color: #fafbfc;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.documento-card:hover {
    border-color: #c8d0da;
    box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .06);
}

.documento-card-icono {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .4rem;
    background-color: #fde8e8;
    color: #d9534f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.documento-card-info {
    flex-grow: 1;
    min-width: 0;
}

.documento-card-nombre {
    font-weight: 600;
    word-break: break-word;
}

.documento-card-boton {
    flex-shrink: 0;
}

.docs-panel-subtitulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ccpp-azul);
    letter-spacing: .01em;
}

.upload-dropzone {
    position: relative;
    border: 2px dashed #adb5bd;
    border-radius: .35rem;
    background: #fff;
    margin-bottom: 1rem;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.upload-dropzone.upload-dropzone--dragover {
    border-color: var(--ccpp-verde);
    background: #f0faf6;
}

.upload-dropzone.upload-dropzone--completo {
    border-style: solid;
    border-color: var(--ccpp-verde);
}

.upload-dropzone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.75rem 1rem;
    margin: 0;
    cursor: pointer;
    color: #495057;
}

.upload-dropzone-label i {
    font-size: 1.9rem;
    color: var(--ccpp-azul);
    margin-bottom: .5rem;
}

.upload-dropzone-titulo {
    font-weight: 600;
}

.upload-dropzone-hint {
    font-size: .8rem;
    color: #6c757d;
}

.upload-dropzone-archivo {
    display: none;
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ccpp-verde-oscuro);
}

.upload-dropzone-archivo.mostrar {
    display: inline-flex;
    align-items: center;
}

.upload-dropzone-input {
    position: absolute;
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
}

/* Overlay de envío con barra de progreso */
.overlay-envio {
    position: fixed;
    inset: 0;
    background: rgba(32, 47, 74, .85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.overlay-envio-card {
    background: #fff;
    border-radius: .5rem;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.overlay-envio-icono {
    font-size: 2.5rem;
    color: var(--ccpp-azul);
    margin-bottom: .75rem;
}

.overlay-envio-icono.overlay-envio-icono--exito {
    color: var(--ccpp-verde);
}

.overlay-envio-icono.overlay-envio-icono--error {
    color: #dc3545;
}

.overlay-envio-porcentaje {
    font-weight: 700;
    color: var(--ccpp-azul);
    margin: .6rem 0 0;
}

.overlay-envio .progress {
    height: .6rem;
}

.overlay-envio .progress-bar {
    background-color: var(--ccpp-verde);
}

/* Línea de tiempo del historial (consulta pública): se usa el componente
   .timeline de AdminLTE tal cual viene en la plantilla (pages/examples/
   profile.html), no una versión propia. Aparte de los detalles de color
   de marca, cada tarjeta lleva un acento de color a la izquierda según el
   tipo de movimiento — el ícono (<i class="... bg-success">, etc.) es
   hermano de .timeline-item en el HTML de AdminLTE, así que el color se
   toma con el selector de hermano adyacente, sin tocar la vista. */
.timeline .timeline-item {
    border-radius: .5rem;
    border-left: 4px solid #adb5bd;
    box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .07);
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.timeline .timeline-item:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}

.timeline>div>.bg-primary + .timeline-item {
    border-left-color: var(--ccpp-azul);
}

.timeline>div>.bg-success + .timeline-item {
    border-left-color: var(--ccpp-verde);
}

.timeline>div>.bg-info + .timeline-item {
    border-left-color: #17a2b8;
}

.timeline>div>.bg-warning + .timeline-item {
    border-left-color: #d39e00;
}

.timeline>div>.bg-danger + .timeline-item {
    border-left-color: #dc3545;
}

.timeline .timeline-header {
    color: var(--ccpp-azul);
    font-size: 1rem;
    font-weight: 700;
    padding: .85rem 1rem;
}

.timeline .timeline-body {
    padding: .85rem 1rem;
    font-size: .92rem;
    line-height: 1.5;
}

.timeline .time {
    background: rgba(255, 255, 255, .9);
    border-radius: .25rem;
    padding: 1px 6px;
}

.timeline .time-label>span {
    background-color: #eef1f6 !important;
    color: var(--ccpp-azul);
    border: 1px solid #dde2e8;
    font-size: .78rem;
}