/* ============================================================
   ESTILOS – TRÁMITES POR DEPENDENCIA
   Archivo: secretaria-del-ayuntamiento.css
   ------------------------------------------------------------
   Este archivo controla:
   - Sección principal de trámites de una dependencia
   - Grid de trámites
   - Tarjetas tipo acordeón
   - Animaciones y estados activos
   ------------------------------------------------------------
   👉 Reutilizable para:
      tesoreria.css
      sindicatura.css
      obras-publicas.css
============================================================ */


/* ============================================================
   CONTENEDOR PRINCIPAL DE TRÁMITES
============================================================ */
section#tramites {
    padding: 2rem 1rem;              /* Espaciado interno */
    background-color: #ffffff;         /* Fondo limpio institucional */
    margin: 1rem auto;
    max-width: 1100px;                 /* Alineado al resto del sitio */
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}


/* ============================================================
   TÍTULO DE LA DEPENDENCIA
   (Ej: Secretaría del Ayuntamiento)
============================================================ */
section#tramites h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: #001f3f;
    text-align: center;
    margin-bottom: 1rem;
}


/* ============================================================
   DESCRIPCIÓN INTRODUCTORIA
============================================================ */
section#tramites .descripcion {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2.5rem;
}

/* ============================================================
   NOTA INFORMATIVA
   ------------------------------------------------------------
   Texto secundario / aclaraciones legales
============================================================ */
.nota {
    text-align: center;
    font-size: .75rem;        /* Más pequeño que la descripción */
    color: #666;              /* Tono discreto */
    margin-top: -.80rem;       /* Acerca visualmente a la descripción */
    margin-bottom: 2rem;
    font-style: italic;       /* Sensación de aclaración */
}


/* ============================================================
   GRID DE TRÁMITES
   ------------------------------------------------------------
   - 2 columnas en escritorio
   - 1 columna en móvil
============================================================ */
.tramites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
}


/* ============================================================
   TARJETA DE TRÁMITE (ACORDEÓN)
============================================================ */
.tramite-card {
    background: #ffffff;
    border-left: 6px solid #001f3f;     /* Identidad institucional */
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    cursor: pointer;

    box-shadow: 0 6px 18px rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* Hover institucional */
.tramite-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.15);
}


/* ============================================================
   ENCABEZADO DEL TRÁMITE
   ------------------------------------------------------------
   Contiene:
   - Nombre del trámite
   - Flecha indicadora
============================================================ */
.tramite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Título del trámite */
.tramite-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #001f3f;
    margin: 0;
}


/* Flecha */
.tramite-header span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #001f3f;
    transition: transform .3s ease;
}


/* Flecha cuando el trámite está abierto */
.tramite-card.activo .tramite-header span {
    transform: rotate(90deg);
}


/* ============================================================
   DESCRIPCIÓN CORTA DEL TRÁMITE
============================================================ */
.tramite-card > p {
    margin-top: .6rem;
    font-size: .95rem;
    color: #444;
}


/* ============================================================
   CONTENIDO DESPLEGABLE – REQUISITOS
   ------------------------------------------------------------
   Animado (no display none)
============================================================ */
.tramite-detalle {
    max-height: 0;             /* Cerrado */
    overflow: hidden;
    opacity: 0;

    margin-top: 1rem;
    border-top: 1px solid #e6ecf3;
    padding-top: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding-top .25s ease;
}


/* Trámite activo (abierto) */
.tramite-card.activo .tramite-detalle {
    max-height: 600px;         /* Ajustable según contenido */
    opacity: 1;
    padding-top: 1rem;
}


/* Título "Requisitos:" */
.tramite-detalle strong {
    display: block;
    font-size: .95rem;
    color: #001f3f;
    margin-bottom: .4rem;
}


/* Lista de requisitos */
.tramite-detalle ul {
    padding-left: 1.2rem;
    margin: 0;
}

.tramite-detalle li {
    font-size: .9rem;
    color: #333;
    margin-bottom: .35rem;
}


/* ============================================================
   RESPONSIVE – MÓVILES
============================================================ */
@media (max-width: 768px) {

    /* Grid a una sola columna */
    .tramites-grid {
        grid-template-columns: 1fr;
    }

    /* Título más compacto */
    section#tramites h1 {
        font-size: 2rem;
    }

}