/**
 * CSS Global - Municipalidad Distrital de Talavera
 * Sistema de Diseño Institucional 2026
 * Paleta: Azul Celeste / Blanco / Rojo Claro
 */

/* ============================================
   DESIGN TOKENS - SISTEMA INSTITUCIONAL
   ============================================ */
:root {
    /* Marca Institucional - Azul Celeste */
    --primary: #0284C7;            /* Sky 600 - color institucional principal */
    --primary-color: #0284C7;
    --primary-light: #38BDF8;      /* Sky 400 */
    --primary-lighter: #7DD3FC;    /* Sky 300 */
    --primary-dark: #0369A1;       /* Sky 700 */
    --primary-darker: #075985;     /* Sky 800 */
    --primary-50:  rgba(2, 132, 199, 0.06);
    --primary-100: rgba(2, 132, 199, 0.10);
    --primary-200: rgba(2, 132, 199, 0.18);
    --primary-300: rgba(2, 132, 199, 0.30);

    /* Acento - Rojo Claro */
    --accent: #F87171;             /* Red 400 */
    --accent-color: #F87171;
    --accent-soft: #FECACA;        /* Red 200 */
    --accent-dark: #DC2626;        /* Red 600 */
    --secondary: #F87171;
    --secondary-color: #F87171;

    /* Estados Semánticos */
    --success: #10B981;            /* Emerald 500 */
    --warning: #F59E0B;            /* Amber 500 */
    --error: #EF4444;              /* Red 500 */
    --info: #0284C7;

    /* Neutros - Slate Scale */
    --ink-50:  #F8FAFC;
    --ink-100: #F1F5F9;
    --ink-200: #E2E8F0;
    --ink-300: #CBD5E1;
    --ink-400: #94A3B8;
    --ink-500: #64748B;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1E293B;
    --ink-900: #0F172A;

    /* Texto / Superficies */
    --text-color: #1E293B;
    --text-light: #64748B;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;
    --bg-light: #F8FAFC;
    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-soft: #F8FAFC;
    --surface-tint: #F0F9FF;       /* Sky 50 */
    --border: #E2E8F0;
    --border-soft: rgba(2, 132, 199, 0.12);
    --bg-dark: #0F172A;
    --white: #ffffff;
    --black: #000000;

    /* Glass Tokens (profesional, no infantil) */
    --glass-white: rgba(255, 255, 255, 0.72);
    --glass-light: rgba(255, 255, 255, 0.42);
    --glass-tint: rgba(2, 132, 199, 0.08);
    --glass-border: rgba(255, 255, 255, 0.42);
    --glass-border-blue: rgba(2, 132, 199, 0.18);
    --glass-blur: blur(16px) saturate(1.1);
    --glass-blur-strong: blur(24px) saturate(1.15);

    /* Tipografía Institucional */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--font-sans);

    /* Bordes - Geometría contenida (sin pill en cards/botones) */
    --border-radius: 10px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;          /* Solo dots / chips circulares */

    /* Sombras - Multi-capa profesional */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.10), 0 8px 18px rgba(15, 23, 42, 0.06);
    --shadow-2xl: 0 40px 80px rgba(15, 23, 42, 0.14), 0 16px 32px rgba(15, 23, 42, 0.08);
    --shadow-primary: 0 12px 30px rgba(2, 132, 199, 0.28), 0 4px 12px rgba(2, 132, 199, 0.18);
    --shadow-primary-soft: 0 8px 24px rgba(2, 132, 199, 0.16);

    /* Easing & Duraciones (animaciones cinematográficas) */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 180ms;
    --duration-normal: 320ms;
    --duration-slow: 520ms;
    --duration-slower: 880ms;
    --transition: 220ms var(--ease-smooth);

    /* Layout */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* Z-index escala */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;
    --z-tooltip: 70;

    /* Retícula SVG tipo hoja cuadriculada */
    --notebook-paper-color: #FBFDFF;
    --notebook-grid-size: 24px 24px;
    --notebook-grid-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M.5 0V24M0 .5H24' stroke='%230284C7' stroke-opacity='.075' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --notebook-paper-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(247, 251, 255, 0.66) 100%),
        var(--notebook-grid-svg),
        linear-gradient(180deg, #FFFFFF 0%, var(--notebook-paper-color) 56%, #F7FBFF 100%);
    --notebook-paper-background-size: auto, var(--notebook-grid-size), auto;
    --notebook-paper-background-position: center top, 0 0, center top;
    --dot-grid-svg: var(--notebook-grid-svg);
}

/* Reset basico */
* {
    box-sizing: border-box;
}

/* Fix scroll bounce issue */
html {
    overscroll-behavior: none;
    height: auto !important;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--notebook-paper-color);
    background-image: var(--notebook-paper-background);
    background-size: var(--notebook-paper-background-size);
    background-position: var(--notebook-paper-background-position);
    background-repeat: no-repeat, repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    overscroll-behavior: none;
    height: auto !important;
    min-height: 100vh;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
select,
textarea,
label {
    font-family: var(--font-sans);
}

body.com_gridbox {
    overflow-y: auto !important;
    height: auto !important;
}

/* Utilidades */
.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/* Contenedor principal */
.body {
    margin: 0;
    padding: 0;
    overflow: visible !important;
    height: auto !important;
}

main {
    min-height: 50vh;
    background: transparent;
    overflow: visible !important;
    height: auto !important;
}

/* Fix scroll para contenedores gridbox */
.ba-gridbox-page,
.main-body,
.module-position,
.row-fluid {
    overflow: visible !important;
    height: auto !important;
}

/* Estilos de enlaces */
a {
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    text-decoration: none;
}

/* Breadcrumbs globales */
.ba-breadcrumbs-wrapper {
    padding: 15px 0;
}

.ba-breadcrumbs-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ba-breadcrumbs-wrapper li {
    display: inline-flex;
    align-items: center;
}

.ba-breadcrumbs-wrapper .ba-breadcrumbs-separator {
    margin: 0 8px;
    color: var(--text-light);
}

.ba-breadcrumbs-wrapper .active span {
    color: var(--primary-color);
    font-weight: 500;
}

/* Botones */
.ba-btn-transition {
    transition: var(--transition);
}

.ba-btn-transition:hover {
    transform: translateY(-2px);
}

/* Row fluid fix */
.row-fluid:after {
    content: "";
    display: table;
    line-height: 0;
    clear: both;
}

.row-fluid:before {
    content: "";
    display: table;
    line-height: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ba-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Paginacion global */
.pagination {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    list-style: none;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    color: var(--white);
    padding: 10px 15px;
    text-decoration: none;
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    border: none;
    transition: var(--transition);
}

.pagination a:hover {
    background-color: var(--primary-color);
}

.pagination .active span {
    color: var(--white);
    background-color: var(--primary);
    border-radius: 10px;
    padding: 10px 15px;
}

.pagination .disabled span {
    color: var(--text-light);
    border-color: var(--text-light);
}

/* Sistema visual público */
.home-page,
.posts-page,
.obras-page,
.institution-page,
.bodies-page,
.documents-page,
.virtual-documents-page,
.convocatorias-page,
.consultation-page,
.transparencia-page,
.account-page,
.seguridad-page {
    background-color: var(--notebook-paper-color) !important;
    background-image: var(--notebook-paper-background) !important;
    background-size: var(--notebook-paper-background-size) !important;
    background-position: var(--notebook-paper-background-position) !important;
    background-repeat: no-repeat, repeat, no-repeat !important;
    background-attachment: fixed, fixed, fixed !important;
    color: var(--text-color);
    font-family: var(--font-sans);
}

.posts-hero,
.obras-hero,
.institution-hero,
.bodies-hero,
.documents-hero,
.convocatorias-hero,
.consultation-hero,
.transparencia-hero,
.account-hero,
.seguridad-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 30rem),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 58%, var(--primary-light) 100%) !important;
}

.posts-hero__title,
.obras-hero__title,
.institution-hero__title,
.bodies-hero__title,
.documents-hero__title,
.convocatorias-hero__title,
.consultation-hero__title,
.transparencia-hero__title,
.account-hero__title,
.seguridad-hero__title,
.section-title {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

.posts-breadcrumb,
.obras-breadcrumb,
.institution-breadcrumb,
.bodies-breadcrumb,
.documents-breadcrumb,
.convocatorias-breadcrumb,
.consultation-breadcrumb,
.transparencia-breadcrumb,
.account-breadcrumb {
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.12) !important;
}

.btn,
.doc-btn,
.obra-btn,
.post-card__link,
.service-link,
.bodies-service-card__btn,
.modal-btn,
.download-btn {
    min-height: 44px;
    border-radius: var(--radius-md);
}

.post-card,
.obra-card,
.profile-card,
.bodies-card,
.results-card,
.filters-card,
.stat-card,
.sidebar-widget,
.service-card,
.notice-card {
    background: var(--surface);
    border-color: rgba(40, 37, 29, 0.12) !important;
    box-shadow: var(--shadow-sm);
}

.post-card:hover,
.obra-card:hover,
.bodies-card:hover,
.results-card:hover,
.service-card:hover,
.notice-card:hover {
    box-shadow: var(--shadow-md);
}

.form-input,
.search-form__input,
.search-box__input,
input,
select,
textarea {
    min-height: 44px;
}

.posts-search-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    color: var(--text-color);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.posts-search-status a {
    color: var(--primary);
    font-weight: 700;
}

/* Botón flotante para volver al inicio */
.back-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 1.5rem);
    bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 9998;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--primary-dark);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)),
        rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(2, 132, 199, 0.22);
    border-radius: var(--radius-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 26px -18px rgba(2, 132, 199, 0.38);
    backdrop-filter: blur(16px) saturate(1.35) brightness(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.35) brightness(1.04);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    color: var(--primary);
    border-color: rgba(2, 132, 199, 0.34);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 2px 6px rgba(15, 23, 42, 0.08),
        0 16px 30px -18px rgba(2, 132, 199, 0.42);
}

.back-to-top:active {
    transform: translateY(0) scale(0.98);
}

.back-to-top i {
    font-size: 0.875rem;
    line-height: 1;
}

@media (max-width: 640px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}


/* Extracted from resources/views/layouts/app.blade.php - accessibility and Gridbox layout fixes */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    z-index: 99999;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top 0.2s var(--ease-smooth);
}
.skip-link:focus {
    top: 0;
}

/* Focus visible para navegacion por teclado */
*:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* Remover outline para usuarios de mouse */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

html.com_gridbox,
html.gridbox,
html,
html[class] {
    height: auto !important;
    min-height: 100% !important;
    overscroll-behavior: none !important;
}

body.com_gridbox.page,
body.com_gridbox,
body.page,
body,
body[class] {
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
}

.ba-wrapper,
.ba-gridbox-page,
.ba-section,
.ba-section-items,
.ba-row,
.ba-grid-column,
main,
.body,
.main-body,
.module-position {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}