/**
 * Archivo: assets/css/shared/cards.css
 * Sistema: Allage - Estilos de Cards Globales
 * Versión: 1.0.0
 * Fecha: 18 Enero 2026
 *
 * DESCRIPCIÓN:
 * Estilos de cards compartidos entre admin y frontend.
 *
 * CLASES DISPONIBLES:
 * - .ltn-card           : Card básica
 * - .ltn-card.success   : Card con borde verde (éxito)
 * - .ltn-card.warning   : Card con borde amarillo
 * - .ltn-card.error     : Card con borde rojo
 * - .ltn-card.info      : Card con borde azul
 * - .ltn-card-header    : Header de card
 * - .ltn-card-body      : Cuerpo de card
 * - .ltn-card-footer    : Footer de card
 */

/* ===========================================
   CARD BÁSICA
   =========================================== */
.ltn-card {
    background: var(--ltn-gray-100, #F8FAFC);
    border: var(--ltn-border, 1px solid #E2E8F0);
    border-radius: var(--ltn-border-radius, 8px);
    padding: var(--ltn-spacing-lg, 24px);
    margin-bottom: var(--ltn-spacing-md, 16px);
    transition: var(--ltn-transition, all 0.2s ease);
    box-shadow: var(--ltn-shadow-sm, 0 2px 4px rgba(80, 103, 39, 0.1));
}

.ltn-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(80, 103, 39, 0.15));
    border-color: var(--ltn-green-accent, #9ACD32);
}

/* Cards con estado */
.ltn-card.success {
    border-left: 4px solid var(--ltn-green-primary, #506727);
}

.ltn-card.warning {
    border-left: 4px solid #F59E0B;
}

.ltn-card.error {
    border-left: 4px solid #EF4444;
}

.ltn-card.info {
    border-left: 4px solid #3B82F6;
}

/* ===========================================
   CARD HEADER
   =========================================== */
.ltn-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ltn-spacing-md, 16px);
    border-bottom: 1px solid var(--ltn-gray-200, #E2E8F0);
    background: var(--ltn-gray-100, #F8FAFC);
    border-radius: var(--ltn-border-radius, 8px) var(--ltn-border-radius, 8px) 0 0;
    margin: calc(-1 * var(--ltn-spacing-lg, 24px));
    margin-bottom: var(--ltn-spacing-md, 16px);
}

.ltn-card-header h3,
.ltn-card-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ltn-green-primary, #506727);
}

.ltn-card-header .card-icon {
    font-size: 24px;
    margin-right: var(--ltn-spacing-sm, 8px);
}

/* ===========================================
   CARD BODY
   =========================================== */
.ltn-card-body {
    padding: 0;
}

/* ===========================================
   CARD FOOTER
   =========================================== */
.ltn-card-footer {
    padding: var(--ltn-spacing-md, 16px);
    border-top: 1px solid var(--ltn-gray-200, #E2E8F0);
    background: var(--ltn-gray-100, #F8FAFC);
    border-radius: 0 0 var(--ltn-border-radius, 8px) var(--ltn-border-radius, 8px);
    margin: var(--ltn-spacing-md, 16px) calc(-1 * var(--ltn-spacing-lg, 24px)) calc(-1 * var(--ltn-spacing-lg, 24px));
}

/* ===========================================
   CARD GRID
   =========================================== */
.ltn-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ltn-spacing-md, 16px);
    margin-bottom: var(--ltn-spacing-lg, 24px);
}

/* ===========================================
   ALIAS DE COMPATIBILIDAD (.acf-* → .ltn-*)
   =========================================== */
.acf-card {
    background: var(--ltn-gray-100, #F8FAFC);
    border: var(--ltn-border, 1px solid #E2E8F0);
    border-radius: var(--ltn-border-radius, 8px);
    padding: var(--ltn-spacing-lg, 24px);
    margin-bottom: var(--ltn-spacing-md, 16px);
    transition: var(--ltn-transition, all 0.2s ease);
    box-shadow: var(--ltn-shadow-sm, 0 2px 4px rgba(80, 103, 39, 0.1));
}

.acf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(80, 103, 39, 0.15));
    border-color: var(--ltn-green-accent, #9ACD32);
}

.acf-card.success {
    border-left: 4px solid var(--ltn-green-primary, #506727);
}

.acf-card.warning {
    border-left: 4px solid #F59E0B;
}

.acf-card.error {
    border-left: 4px solid #EF4444;
}

.acf-card.info {
    border-left: 4px solid #3B82F6;
}

.acf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ltn-spacing-md, 16px);
    border-bottom: 1px solid var(--ltn-gray-200, #E2E8F0);
    background: var(--ltn-gray-100, #F8FAFC);
    border-radius: var(--ltn-border-radius, 8px) var(--ltn-border-radius, 8px) 0 0;
    margin: calc(-1 * var(--ltn-spacing-md, 16px));
    margin-bottom: var(--ltn-spacing-md, 16px);
}

.acf-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ltn-green-primary, #506727);
}

.acf-card-body {
    padding: 0;
}

.acf-card-footer {
    padding: var(--ltn-spacing-md, 16px);
    border-top: 1px solid var(--ltn-gray-200, #E2E8F0);
    background: var(--ltn-gray-100, #F8FAFC);
    border-radius: 0 0 var(--ltn-border-radius, 8px) var(--ltn-border-radius, 8px);
    margin: var(--ltn-spacing-md, 16px) calc(-1 * var(--ltn-spacing-lg, 24px)) calc(-1 * var(--ltn-spacing-lg, 24px));
}

.acf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ltn-spacing-md, 16px);
    margin-bottom: var(--ltn-spacing-lg, 24px);
}


/* ===========================================
   ESTADO VACÍO (empty state)
   =========================================== */

.ltn-empty-state {
    text-align: center;
    padding: var(--ltn-spacing-xl, 48px) var(--ltn-spacing-lg, 24px);
    background: var(--ltn-gray-50, #F8FAFC);
    border: 1px dashed var(--ltn-gray-200, #E2E8F0);
    border-radius: var(--ltn-border-radius, 8px);
    color: var(--ltn-gray-500, #718096);
}

.ltn-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--ltn-gray-300, #CBD5E0);
    display: block;
    margin: 0 auto var(--ltn-spacing-sm, 8px);
}

.ltn-empty-state h3 {
    font-size: var(--ltn-font-size-lg, 18px);
    font-weight: 600;
    color: var(--ltn-gray-600, #4A5568);
    margin: 0 0 var(--ltn-spacing-xs, 4px);
}

.ltn-empty-state p {
    font-size: var(--ltn-font-size-sm, 14px);
    margin: 0;
}

/* ─── Variantes Block Styles para bloques grupo Gutenberg ───────────────
   NUNCA usar valores hardcoded — solo variables --ltn-*
   ─────────────────────────────────────────────────────────────────────── */

.wp-block-group.is-style-ltn-card {
    background:    var(--ltn-white);
    border:        var(--ltn-border);
    border-radius: var(--ltn-border-radius-lg);
    padding:       var(--ltn-spacing-lg);
    box-shadow:    var(--ltn-shadow-sm);
}

.wp-block-group.is-style-ltn-card-success {
    background:    var(--ltn-success-bg);
    border:        1px solid var(--ltn-success-border);
    border-radius: var(--ltn-border-radius-lg);
    padding:       var(--ltn-spacing-lg);
}

.wp-block-group.is-style-ltn-card-warning {
    background:    var(--ltn-warning-bg);
    border:        1px solid var(--ltn-warning-border);
    border-radius: var(--ltn-border-radius-lg);
    padding:       var(--ltn-spacing-lg);
}