/* ====================================================================
   SECCIONES
   Solo la sección .activa se ve
   ==================================================================== */

.SECCION {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.SECCION.activa {
    display: flex;
}

/* Ancho del contenido: hasta 1000px, centrado */
.ACORDEON-SECCION,
.BARRA-ACCIONES {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

/* ====================================================================
   ACORDEONES
   Un acordeón .abierto muestra su cuerpo y gira su flecha
   ==================================================================== */

.ACORDEON-SECCION {
    background: var(--bg-card);
    outline: 1px solid var(--border-color);
    border-radius: 8px;
}

.ACORDEON-CABECERA {
    display: flex;
    cursor: pointer;
    padding: 20px;
    line-height: 20px;
    border-radius: 8px;
}

.ACORDEON-CABECERA:hover {
    background: var(--bg-hover);
}

.ACORDEON-SECCION.abierto .ACORDEON-CABECERA {
    border-radius: 8px 8px 0 0;
}

.ACORDEON-INFO {
    display: flex;
    flex-direction: column;
}

.ACORDEON-TITULO {
    font-size: 14px;
    color: var(--text-primary);
}

.ACORDEON-DESCRIPCION {
    font-size: 12px;
    color: var(--text-secondary);
}

.ACORDEON-ICONO {
    width: 25px;
    height: 25px;
    margin-right: 20px;
    align-self: center;
}

.ACORDEON-ACCIONES {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Flecha dibujada con dos bordes de un cuadrado girado */
.FLECHA {
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--text-secondary);
    border-bottom: 1px solid var(--text-secondary);
    transform: rotate(45deg) translateX(-4px);
}

.ACORDEON-SECCION.abierto .FLECHA {
    transform: rotate(-135deg) translateY(-4px);
}

.ACORDEON-CUERPO {
    padding: 20px;
    display: none;
    border-top: 1px solid var(--border-color);
}

.ACORDEON-SECCION.abierto .ACORDEON-CUERPO {
    display: block;
}

/* ====================================================================
   BARRA DE ACCIONES
   Botones Nuevo, Guardar, Eliminar, etc., alineados a la derecha
   ==================================================================== */

.BARRA-ACCIONES {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Una barra oculta con el atributo hidden (ej. Documento de una nota de crédito):
   el display: flex de arriba le ganaría al hidden, por eso se indica aquí */
.BARRA-ACCIONES[hidden] {
    display: none;
}

.BOTON-ACCION {
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: none;
    outline: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.BOTON-ACCION:hover {
    background: var(--bg-hover);
}

/* ====================================================================
   DESPLEGABLE
   Botón de acción principal + flecha que abre las demás opciones
   ==================================================================== */

/* Caja que une los dos botones con un solo borde por fuera */
.DESPLEGABLE {
    position: relative;
    display: flex;
    outline: 1px solid var(--border-color);
    border-radius: 8px;
}

.DESPLEGABLE-BOTON,
.DESPLEGABLE-FLECHA {
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: none;
    cursor: pointer;
}

/* Ícono y texto en fila */
.DESPLEGABLE-BOTON {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px 0 0 8px;
}

/* Cuadrado de 40px con la flecha al centro */
.DESPLEGABLE-FLECHA {
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
}

/* Subir la flecha: al girarla queda más abajo del centro */
.DESPLEGABLE-FLECHA .FLECHA {
    transform: rotate(45deg) translate(-2px, -2px);
}

.DESPLEGABLE-BOTON:hover,
.DESPLEGABLE-FLECHA:hover {
    background: var(--bg-hover);
}

/* Abierto: el botón pierde sus esquinas de abajo para pegarse a la lista */
.DESPLEGABLE.abierto {
    border-radius: 8px 8px 0 0;
}

.DESPLEGABLE.abierto .DESPLEGABLE-BOTON {
    border-bottom-left-radius: 0;
}

.DESPLEGABLE.abierto .DESPLEGABLE-FLECHA {
    border-bottom-right-radius: 0;
}

/* Lista pegada debajo del botón, sin tapar Descargar */
.DESPLEGABLE-MENU {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 100%;
    box-sizing: border-box;
    z-index: 10;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card);
    outline: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

.DESPLEGABLE.abierto .DESPLEGABLE-MENU {
    display: flex;
}

.DESPLEGABLE-OPCION {
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}

.DESPLEGABLE-OPCION:hover {
    background: var(--bg-hover);
}

.DESPLEGABLE-ICONO {
    width: 20px;
    height: 20px;
}