/**
 * CIPVEGE - Institutional Enhancements Styles
 * Additional styles for institutional information integration
 *
 * @package CIPVEGE
 * @version 1.0.1
 */

/* =========================
   HERO SECTION ENHANCEMENTS
   ========================= */

.hero-motto {
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-weight: 300;
    text-transform: uppercase;
    animation: fadeInDown 0.8s ease-out;
}

/* Counter Animation for Stats */
.stat-number[data-count] {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 0.85;
        transform: translateY(0);
    }
}


/* =========================
   ADMIN (MÓVIL): TABLAS RESPONSIVE
   ========================= */

.cipvege-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop/tablet: se mantiene tabla normal */

@media (max-width: 782px) {
    /* Convertir filas en "tarjetas" legibles en móvil */
    table.cipvege-responsive-table,
    table.cipvege-responsive-table thead,
    table.cipvege-responsive-table tbody,
    table.cipvege-responsive-table th,
    table.cipvege-responsive-table td,
    table.cipvege-responsive-table tr {
        display: block;
        width: 100%;
    }

    table.cipvege-responsive-table thead {
        display: none;
    }

    table.cipvege-responsive-table tr {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 10px 12px;
        margin: 12px 0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    table.cipvege-responsive-table td {
        border: 0 !important;
        padding: 8px 0 !important;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        justify-content: space-between;
    }

    table.cipvege-responsive-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        flex: 0 0 42%;
        max-width: 42%;
    }

    table.cipvege-responsive-table td > * {
        flex: 1 1 auto;
        text-align: right;
    }

    table.cipvege-responsive-table td[data-label="Acciones"] > * {
        text-align: right;
    }

    /* Botones apilados y más fáciles de tocar */
    table.cipvege-responsive-table td[data-label="Acciones"] {
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
    }

    table.cipvege-responsive-table td[data-label="Acciones"]:before {
        flex: 0 0 auto;
        max-width: none;
        margin-bottom: 6px;
    }

    table.cipvege-responsive-table td[data-label="Acciones"] a.button {
        margin: 6px 0 !important;
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        white-space: normal;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Enhanced animations for page elements */
.hero-title {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-subtitle {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-buttons {
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* Stats Section Enhancements */
.stats-section .stat-number {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* Smooth scroll improvements */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .hero-section,
    .stats-section,
    header,
    footer,
    .btn {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 18pt;
    }
    
    h3 {
        font-size: 14pt;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #2E5F70;
        --color-primary-dark: #1F3F4D;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* To be implemented if needed */
}

/* Responsive typography scaling */
@media (max-width: 1200px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .hero-motto {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 14px;
    }
}

/* Performance optimizations */
.facility-card,
.objective-card,
.partner-item,
.resource-card,
.program-card {
    will-change: transform;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--color-gray-300);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-center {
    text-align: center;
}

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

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 3rem; }

/* Visibility utilities */
.d-none {
    display: none !important;
}

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

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

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

@media (max-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    
    .d-sm-block {
        display: block !important;
    }
}


/* =========================
   INSCRIPCIONES - Programa + Precios (Responsive)
   ========================= */
.cipvege-inscripcion-form .cipvege-pricing{
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(0,0,0,0.12);
    border-radius:12px;
    background:#fff;
}
.cipvege-pricing-head h3{
    margin:0 0 6px 0;
    font-size:1.05rem;
}
.cipvege-pricing-sub{
    margin:0;
    opacity:0.85;
}
.cipvege-pricing-meta{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}
.cipvege-pricing-meta > div{
    border:1px solid rgba(0,0,0,0.08);
    border-radius:10px;
    padding:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.cipvege-pricing-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
    margin-top:12px;
}
.cipvege-card{
    border:1px solid rgba(0,0,0,0.08);
    border-radius:12px;
    padding:12px;
    background:#fafafa;
}
.cipvege-card h4{
    margin:0 0 8px 0;
    font-size:1rem;
}
.cipvege-card-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    margin-bottom:10px;
}
.cipvege-card-total span{opacity:0.85;}
.cipvege-card-total strong{font-size:1.02rem;}

.cipvege-fin-wrap{margin-top:10px;}
.cipvege-fin-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.95rem;
}
.cipvege-fin-table th,
.cipvege-fin-table td{
    border:1px solid rgba(0,0,0,0.08);
    padding:8px;
    text-align:center;
}
.cipvege-fin-table thead th{
    font-weight:600;
    background:#fff;
}

.cipvege-fin-list{
    display:none;
    margin-top:8px;
}
.cipvege-fin-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 10px;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:10px;
    background:#fff;
    margin-bottom:8px;
}
.cipvege-note{
    margin:10px 0 0 0;
    font-size:0.9rem;
    opacity:0.8;
}

/* Forzar tablas en móvil (especializaciones) */
#cipvege-pricing.cipvege-pricing--force-table .cipvege-fin-table{display:table;}
#cipvege-pricing.cipvege-pricing--force-table .cipvege-fin-list{display:none;}
#cipvege-pricing.cipvege-pricing--force-table .cipvege-fin-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
#cipvege-pricing.cipvege-pricing--force-table .cipvege-fin-table{min-width:520px;}


/* Responsive */
@media (max-width: 820px){
    .cipvege-pricing-grid{grid-template-columns:1fr;}
    .cipvege-pricing-meta{grid-template-columns:1fr;}
    .cipvege-fin-table{display:none;}
    .cipvege-fin-list{display:block;}
}


/* --- CIPVEGE: Tabla bonita de precios (admin + front) --- */
.cipvege-pricing-resumen{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.cipvege-pricing-resumen > div{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
}
.cipvege-price-table-wrap{
  margin-top:12px;
  overflow:auto;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  background:#fff;
}
.cipvege-price-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
.cipvege-price-table th,
.cipvege-price-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  text-align:center;
  white-space:nowrap;
}
.cipvege-price-table th{
  background:#1e73be;
  color:#fff;
  font-weight:600;
}
.cipvege-price-table td:first-child{
  text-align:left;
}
.cipvege-price-table tr:nth-child(even) td{
  background:rgba(0,0,0,0.02);
}