/**
 * Base CSS - Plataforma SEAP-IAP
 * 
 * Estilos base, tipografía, spacing y sistema de grid
 * Importa variables.css y reset.css antes de este archivo
 */

/* ============================================
   TIPOGRAFÍA BASE
   ============================================ */

body {
    font-family: var(--seap-font-primary);
    font-size: var(--seap-font-size-base);
    font-weight: var(--seap-font-weight-normal);
    line-height: var(--seap-line-height-normal);
    color: var(--seap-text-main);
    background-color: var(--seap-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.main-content,
.catalog-container,
.player-container,
.help-page {
    width: 100%;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--seap-font-heading);
    font-weight: var(--seap-font-weight-bold);
    line-height: var(--seap-line-height-tight);
    color: var(--seap-text-main);
    margin-bottom: var(--seap-space-md);
}

h1 {
    font-size: var(--seap-font-size-4xl);
}

h2 {
    font-size: var(--seap-font-size-3xl);
}

h3 {
    font-size: var(--seap-font-size-2xl);
}

h4 {
    font-size: var(--seap-font-size-xl);
}

h5 {
    font-size: var(--seap-font-size-lg);
}

h6 {
    font-size: var(--seap-font-size-base);
}

/* Párrafos */
p {
    margin-bottom: var(--seap-space-md);
}

p:last-child {
    margin-bottom: 0;
}

/* Enlaces */
a {
    color: var(--seap-link);
    text-decoration: none;
    transition: color var(--seap-transition-fast);
}

a:hover {
    color: var(--seap-link-hover);
    text-decoration: underline;
}

a:visited {
    color: var(--seap-link-visited);
}

a:focus {
    outline: 2px solid var(--seap-primary);
    outline-offset: 2px;
}

/* Listas */
ul,
ol {
    margin-bottom: var(--seap-space-md);
    padding-left: var(--seap-space-xl);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: var(--seap-space-sm);
}

/* Énfasis */
strong,
b {
    font-weight: var(--seap-font-weight-bold);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--seap-font-size-sm);
    color: var(--seap-text-muted);
}

/* Código */
code,
kbd,
samp,
pre {
    font-family: var(--seap-font-mono);
    font-size: var(--seap-font-size-sm);
}

code {
    padding: 0.125rem 0.375rem;
    background-color: var(--seap-bg-soft);
    border-radius: var(--seap-radius-sm);
    color: var(--seap-primary-dark);
}

pre {
    padding: var(--seap-space-md);
    background-color: var(--seap-bg-gray);
    border-radius: var(--seap-radius-md);
    overflow-x: auto;
    margin-bottom: var(--seap-space-md);
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* Citas */
blockquote {
    padding: var(--seap-space-md) var(--seap-space-lg);
    margin-bottom: var(--seap-space-md);
    border-left: 4px solid var(--seap-primary);
    background-color: var(--seap-bg-soft);
    font-style: italic;
    color: var(--seap-text-muted);
}

/* Línea horizontal */
hr {
    border: 0;
    height: 1px;
    background-color: var(--seap-border);
    margin: var(--seap-space-xl) 0;
}

/* ============================================
   SISTEMA DE CONTENEDOR
   ============================================ */

.container {
    width: 100%;
    max-width: var(--seap-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--seap-container-padding);
    padding-right: var(--seap-container-padding);
}

.container-fluid {
    width: 100%;
    padding-left: var(--seap-container-padding);
    padding-right: var(--seap-container-padding);
}

/* ============================================
   SISTEMA DE GRID
   ============================================ */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--seap-grid-gap) / -2);
    margin-right: calc(var(--seap-grid-gap) / -2);
}

.col {
    flex: 1 0 0%;
    padding-left: calc(var(--seap-grid-gap) / 2);
    padding-right: calc(var(--seap-grid-gap) / 2);
}

/* Columnas específicas */
.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ============================================
   UTILIDADES DE ESPACIADO
   ============================================ */

/* Margins */
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.m-sm {
    margin: var(--seap-space-sm) !important;
}

.mt-sm {
    margin-top: var(--seap-space-sm) !important;
}

.mr-sm {
    margin-right: var(--seap-space-sm) !important;
}

.mb-sm {
    margin-bottom: var(--seap-space-sm) !important;
}

.ml-sm {
    margin-left: var(--seap-space-sm) !important;
}

.m-md {
    margin: var(--seap-space-md) !important;
}

.mt-md {
    margin-top: var(--seap-space-md) !important;
}

.mr-md {
    margin-right: var(--seap-space-md) !important;
}

.mb-md {
    margin-bottom: var(--seap-space-md) !important;
}

.ml-md {
    margin-left: var(--seap-space-md) !important;
}

.m-lg {
    margin: var(--seap-space-lg) !important;
}

.mt-lg {
    margin-top: var(--seap-space-lg) !important;
}

.mr-lg {
    margin-right: var(--seap-space-lg) !important;
}

.mb-lg {
    margin-bottom: var(--seap-space-lg) !important;
}

.ml-lg {
    margin-left: var(--seap-space-lg) !important;
}

.m-xl {
    margin: var(--seap-space-xl) !important;
}

.mt-xl {
    margin-top: var(--seap-space-xl) !important;
}

.mr-xl {
    margin-right: var(--seap-space-xl) !important;
}

.mb-xl {
    margin-bottom: var(--seap-space-xl) !important;
}

.ml-xl {
    margin-left: var(--seap-space-xl) !important;
}

/* Paddings */
.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.p-sm {
    padding: var(--seap-space-sm) !important;
}

.pt-sm {
    padding-top: var(--seap-space-sm) !important;
}

.pr-sm {
    padding-right: var(--seap-space-sm) !important;
}

.pb-sm {
    padding-bottom: var(--seap-space-sm) !important;
}

.pl-sm {
    padding-left: var(--seap-space-sm) !important;
}

.p-md {
    padding: var(--seap-space-md) !important;
}

.pt-md {
    padding-top: var(--seap-space-md) !important;
}

.pr-md {
    padding-right: var(--seap-space-md) !important;
}

.pb-md {
    padding-bottom: var(--seap-space-md) !important;
}

.pl-md {
    padding-left: var(--seap-space-md) !important;
}

.p-lg {
    padding: var(--seap-space-lg) !important;
}

.pt-lg {
    padding-top: var(--seap-space-lg) !important;
}

.pr-lg {
    padding-right: var(--seap-space-lg) !important;
}

.pb-lg {
    padding-bottom: var(--seap-space-lg) !important;
}

.pl-lg {
    padding-left: var(--seap-space-lg) !important;
}

.p-xl {
    padding: var(--seap-space-xl) !important;
}

.pt-xl {
    padding-top: var(--seap-space-xl) !important;
}

.pr-xl {
    padding-right: var(--seap-space-xl) !important;
}

.pb-xl {
    padding-bottom: var(--seap-space-xl) !important;
}

.pl-xl {
    padding-left: var(--seap-space-xl) !important;
}

/* ============================================
   UTILIDADES DE TEXTO
   ============================================ */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

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

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-primary {
    color: var(--seap-primary) !important;
}

.text-muted {
    color: var(--seap-text-muted) !important;
}

.text-white {
    color: var(--seap-text-white) !important;
}

.text-success {
    color: var(--seap-success) !important;
}

.text-warning {
    color: var(--seap-warning) !important;
}

.text-danger {
    color: var(--seap-danger) !important;
}

.text-info {
    color: var(--seap-info) !important;
}

.font-weight-light {
    font-weight: var(--seap-font-weight-light) !important;
}

.font-weight-normal {
    font-weight: var(--seap-font-weight-normal) !important;
}

.font-weight-bold {
    font-weight: var(--seap-font-weight-bold) !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   UTILIDADES DE DISPLAY
   ============================================ */

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

/* Flexbox */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-center {
    align-items: center !important;
}

.align-baseline {
    align-items: baseline !important;
}

.align-stretch {
    align-items: stretch !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ============================================
   UTILIDADES DE POSICIONAMIENTO
   ============================================ */

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

/* ============================================
   UTILIDADES VISUALES
   ============================================ */

.shadow-sm {
    box-shadow: var(--seap-shadow-sm) !important;
}

.shadow {
    box-shadow: var(--seap-shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--seap-shadow-lg) !important;
}

.shadow-none {
    box-shadow: none !important;
}

.rounded-sm {
    border-radius: var(--seap-radius-sm) !important;
}

.rounded {
    border-radius: var(--seap-radius-md) !important;
}

.rounded-lg {
    border-radius: var(--seap-radius-lg) !important;
}

.rounded-circle {
    border-radius: var(--seap-radius-round) !important;
}

.rounded-pill {
    border-radius: var(--seap-radius-pill) !important;
}

.border {
    border: var(--seap-border-width) solid var(--seap-border) !important;
}

.border-top {
    border-top: var(--seap-border-width) solid var(--seap-border) !important;
}

.border-right {
    border-right: var(--seap-border-width) solid var(--seap-border) !important;
}

.border-bottom {
    border-bottom: var(--seap-border-width) solid var(--seap-border) !important;
}

.border-left {
    border-left: var(--seap-border-width) solid var(--seap-border) !important;
}

.border-0 {
    border: 0 !important;
}

/* ============================================
   BREAKPOINTS RESPONSIVE
   ============================================ */

/* Small devices (≥576px) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    .col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: var(--seap-container-max-width);
    }
}