/*==========================================================
  SECCIÓN 1 - VARIABLES Y BASE
==========================================================*/
:root {
    /* Paleta Corporativa (Escuela de Escritores) */
    --c-primary: #f3af52;       /* Naranja principal */
    --c-primary-hover: #e67e22; /* Naranja oscuro (hovers) */
    --c-primary-active: #d35400;/* Naranja muy oscuro (activos) */
    
    /* Colores de Estado / Alertas */
    --c-success: #27ae60;
    --c-success-hover: #219150;
    --c-danger: #e74c3c;
    --c-danger-dark: #c62828;
    --c-warning: #f97316;
    
    /* Textos y Fondos */
    --text-main: #333333;
    --text-muted: #777777;
    --text-light: #999999;
    --bg-body: #f4f7f9;
    --bg-card: #ffffff;
    --bg-menu: #f5f5dc;
    --border-light: #eeeeee;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-main);
}
/*==========================================================
  SECCIÓN 2 - UTILIDADES Y ALINEACIÓN
==========================================================*/
.hidden { display: none !important; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { justify-content: space-between; }
.flex-start { justify-content: flex-start; align-items: flex-start; }
.flex-center { justify-content: center; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-small { width: 120px; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*==========================================================
  SECCIÓN 3 - ESTRUCTURA Y NAVEGACIÓN (LAYOUT)
==========================================================*/
.main-container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
.layout-columns { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; }
main, aside { background-color: var(--bg-card); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-light); }
.header-content h1 { font-size: 1.8rem; margin: 0; color: #2c3e50; }
.header-content h2 { font-size: 1.1rem; font-weight: 300; margin: 0.2rem 0 0 0; color: var(--text-muted); }
footer { text-align: center; margin-top: 3rem; padding: 1.5rem; border-top: 1px solid var(--border-light); color: var(--text-muted); }
nav { background-color: var(--c-primary); padding: 0.2rem 2rem; color: var(--text-main); }
.navbar-container { display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
.nav-brand img { height: 55px; vertical-align: middle; margin-right: 1rem; }
nav a { color: var(--text-main); text-decoration: none; font-size: 1rem; padding: 0.5rem; display: block; }
nav a:hover { text-decoration: underline; }
.nav-main-group { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; margin-right: auto; }
.nav-main-menu { background-color: var(--bg-menu); padding: 0.3rem 1rem; border-radius: 6px; display: flex; gap: 1.5rem; list-style-type: none; margin: 0; }
.nav-main-menu li a { color: #2c3e50; }
.nav-main-menu li a:hover { background-color: var(--c-primary-hover); color: white; border-radius: 4px; text-decoration: none; }
.nav-featured-button { list-style-type: none; }
.nav-featured-button a { background-color: var(--c-primary-hover); color: white; border-radius: 6px; padding: 0.7rem 1rem; }
.nav-featured-button a:hover { background-color: var(--c-primary-active); text-decoration: none; }
.nav-user-menu { position: relative; margin-left: 2rem; padding: 0; flex-shrink: 0; }
.dropdown-toggle { background-color: var(--bg-menu); color: white; border-radius: 20px; display: flex; align-items: center; margin-left: 1.5rem; gap: 0.5rem; flex-shrink: 0; width: fit-content; padding: 0.1rem 0.8rem; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
.dropdown-toggle span { color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-main); }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 30px; z-index: 1000; background-color: var(--bg-menu); border: 1px solid var(--border-light); list-style-type: none; padding: 0; margin: 0; border-radius: 6px; }
.dropdown-menu li a { color: var(--text-main); padding: 0.4rem 0.8rem; white-space: nowrap; }
.nav-user-menu:hover .dropdown-menu { display: block; }
/*==========================================================
  SECCIÓN 4 - SISTEMA DE BOTONES
==========================================================*/
.btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-weight: bold; text-decoration: none; border-radius: 6px; font-size: 0.9rem; transition: all 0.2s ease; white-space: nowrap; cursor: pointer !important; }
.btn-primary { background-color: var(--c-primary); color: #222; border: none; padding: 0 2.5rem; height: 40px; font-weight: 700; border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; transition: background-color 0.2s; }
.btn-primary:hover:not(:disabled) { background-color: var(--c-primary-hover); color: white; }
.btn-primary:disabled { background-color: #ebdcb9; color: var(--text-light); cursor: not-allowed; }
.btn-secondary { background-color: transparent; color: #888; border: 1px solid #ddd; padding: 0 1.5rem; height: 40px; font-weight: 600; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.btn-secondary:hover { border-color: #aaa; color: var(--text-main); }
.btn-add { background-color: var(--c-success); color: white !important; font-weight: 700; }
.btn-add:hover { background-color: var(--c-success-hover); transform: translateY(-1px); text-decoration: none !important; }
.btn-danger { background-color: var(--c-danger) !important; border: 1px solid var(--c-danger-dark) !important; color: white !important; }
.btn-danger:hover { background-color: var(--c-danger-dark) !important; border-color: var(--c-danger-dark) !important; }
.btn-warning { background-color: var(--c-warning) !important; border: 1px solid #ea580c !important; color: white !important; }
.btn-warning:hover { background-color: #c2410c !important; border-color: #c2410c !important; }
.btn-outline-info { border: 1px solid #0288d1; color: #0288d1; background-color: transparent; transition: all 0.2s ease; }
.btn-outline-info:hover { background-color: #e1f5fe; color: #01579b; }
.btn-outline-danger { background-color: #fee2e2; color: #991b1b; border: 1px solid #f87171; }
.btn-outline-danger:hover { background-color: #fca5a5; color: #7f1d1d; border-color: #f87171 !important; }
.btn-outline-warning { background-color: #ffedd5; color: #c2410c; border: 1px solid #fb923c; }
.btn-outline-warning:hover { background-color: #fed7aa; color: #9a3412; border-color: #fb923c !important; }
.btn-outline-move { background-color: #ffffff; color: #c2410c; border: 1px solid #fb923c; }
.btn-outline-move:hover { background-color: #ffedd5; color: #9a3412; border-color: #fb923c !important; }
.btn-outline-move:disabled { background-color: #f9fafb; color: #9ca3af; border-color: #d1d5db; cursor: not-allowed; opacity: 0.6; }
.btn-outline-unsub { background-color: #ffffff; color: var(--c-danger); border: 1px solid var(--c-danger); transition: all 0.2s ease; }
.btn-outline-unsub:hover { background-color: #fee2e2; color: var(--c-danger-dark); border-color: var(--c-danger-dark) !important; }
.btn-outline-unsub:disabled { background-color: #f9fafb; color: #9ca3af; border-color: #d1d5db; cursor: not-allowed; opacity: 0.6; box-shadow: none; }
.btn-outline-unsub:disabled:hover { background-color: #f9fafb !important; color: #9ca3af !important; border-color: #d1d5db !important; }
.btn-outline-enroll { background-color: #ffffff !important; color: #27ae60 !important; border: 1px solid #27ae60 !important; transition: all 0.2s ease; }
.btn-outline-enroll:hover:not([disabled]) { background-color: #27ae60 !important; color: #ffffff !important; }
.btn-naranja { background-color: var(--naranja-txt) !important; color: #fff !important; padding: 0 30px !important; transition: background-color 0.2s ease !important; border: none; }
.btn-naranja:hover:not([disabled]) { background-color: #cc7a00 !important; box-shadow: none !important; }
.btn-outline-naranja { background-color: transparent !important; color: var(--naranja-txt) !important; border: 2px solid var(--naranja-txt) !important; padding: 0 20px !important; transition: all 0.2s ease !important; }
.btn-outline-naranja:hover { background-color: #fff3e6 !important; border-color: #cc7a00 !important; color: #cc7a00 !important; box-shadow: none !important; }
.btn-modal-cancel { background-color: transparent !important; color: #777 !important; border: 1px solid #ccc !important; padding: 0 20px !important; transition: all 0.2s ease !important; width: auto !important; }
.btn-modal-cancel:hover { background-color: #f0f0f0 !important; color: #333 !important; box-shadow: none !important; }
.btn-card-action { padding: 5px 12px; font-size: 13px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.2s; background: #f5f5f5; border: 1px solid #ccc; color: #444; }
.btn-card-action:hover { background: #e0e0e0; border-color: #999; color: #000; }
.btn-card-danger { color: #d32f2f; border-color: #ffcdd2; background: #fff; }
.btn-card-danger:hover { background: #ffebee; border-color: #d32f2f; color: #c62828; }
.actions-cell { display: flex; gap: 4px; justify-content: center; align-items: center; }
.actions-cell button { cursor: pointer !important; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.75rem; height: auto; line-height: 1.2; }
.btn-square-sm { width: 32px; height: 32px; padding: 0 !important; min-width: 32px; justify-content: center; cursor: pointer !important; }
.btn-square-sm .icon-native { font-size: 1.1rem; top: 0; }
.icon-native { font-style: normal; font-size: 1.2rem; line-height: 1; display: inline-block; vertical-align: middle; position: relative; top: -1.5px; }
.btn-icon { background: none; border: none; color: #757575; font-size: 1.2rem; cursor: pointer; transition: color 0.2s ease; }
.btn-icon:hover { color: #0288d1; }
.btn-pill { border-radius: 50px !important; width: auto !important; min-width: 150px; background-color: var(--c-primary) !important; color: #222 !important; transition: background-color 0.2s ease, color 0.2s ease !important; }
.btn-pill:hover { background-color: var(--c-primary-hover) !important; color: white !important; }
.btn-text-action { background: transparent !important; border: none !important; padding: 0 !important; color: var(--naranja-txt); font-size: 0.95rem !important; font-weight: bold; cursor: pointer; text-decoration: none !important; transition: color 0.2s ease; }
.btn-text-action:hover { color: var(--c-primary-active); }
.btn-text-muted { background: transparent !important; border: none !important; padding: 0 !important; color: var(--text-muted) !important; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: color 0.2s ease !important; }
.btn-text-muted:hover { color: var(--text-main) !important; }
.btn-vcenter { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 40px !important; }
/*==========================================================
  SECCIÓN 5 - FORMULARIOS Y EDICIÓN
==========================================================*/
.standard-form-card { background-color: var(--bg-card); padding: 2rem; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; max-width: 800px; margin: 0 auto; position: relative; }
.form-header { margin-bottom: 1.5rem; border-bottom: 2px solid var(--c-primary); padding-bottom: 0.5rem; }
.form-header h3 { margin: 0; color: var(--text-main); font-size: 1.2rem; text-transform: uppercase; font-weight: 700; }
.form-header p { margin: 0; color: var(--text-light); font-size: 0.85rem; }
.form-body { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; overflow: visible !important; }
.form-row { display: grid; gap: 1.5rem; align-items: start; overflow: visible !important; }
.row-asym { grid-template-columns: 3fr 1fr; }
.row-sym { grid-template-columns: 1fr 1fr; }
.row-compact { display: flex; align-items: flex-start; gap: 1rem; }
.spacer { flex-grow: 1; }
.field-wrapper { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; overflow: visible !important; }
.field-wrapper label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.field-wrapper input, .field-wrapper select { padding: 0.25rem 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; color: var(--text-main); background-color: #fff; height: 32px; box-sizing: border-box; width: 100%; transition: border-color 0.2s; }
.field-wrapper input:focus, .field-wrapper select:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 2px rgba(243, 175, 82, 0.1); }
.input-hint { display: block; font-size: 0.7rem; color: var(--text-light); margin-top: 2px; }
.field-readonly, .input-date-static { background-color: #f5f5f5 !important; color: var(--text-muted) !important; font-weight: 600 !important; cursor: not-allowed !important; pointer-events: none !important; }
.input-date-static::-webkit-calendar-picker-indicator { opacity: 0.3; }
.options-panel { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 1.5rem 1rem 1rem; background-color: #fffbf5; border-radius: 6px; border: 1px solid #faeccd; margin-bottom: 1.5rem; width: fit-content; min-width: 300px; }
.check-row { display: flex; align-items: center; gap: 0.5rem; }
.check-row label { font-weight: 600; color: #444; font-size: 0.9rem; cursor: pointer; }
.check-row input[type="checkbox"] { accent-color: var(--c-primary); cursor: pointer; width: 16px; height: 16px; }
.check-desc { margin-left: 24px; color: #7f8c8d; }
.financial-panel { border-top: 1px solid var(--border-light); padding-top: 1.5rem; margin-top: 1rem; }
.financial-panel h4 { margin: 0 0 1rem 0; font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; }
.financial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.financial-col h5 { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--text-main); font-weight: 700; }
.border-left { border-left: 1px solid #f0f0f0; padding-left: 2rem; }
.financial-content { font-size: 0.85rem; color: #555; line-height: 1.6; }
.financial-content ul { list-style-type: none !important; padding: 0 !important; margin: 0 !important; }
.financial-content li { border-bottom: 1px dashed var(--border-light); padding: 3px 0; display: flex; justify-content: space-between; }
.financial-content li strong { font-weight: 500; color: var(--text-main); }
.form-actions { display: flex; justify-content: center; gap: 1rem; padding-top: 2rem; }
.bootstrap-select > .dropdown-toggle { height: 32px !important; padding: 0.25rem 0.5rem !important; }
.bootstrap-select .dropdown-menu { position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important; margin-top: 2px !important; max-height: 250px !important; overflow-y: auto !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; background-color: white !important; }
.bootstrap-select .dropdown-menu li a { padding-left: 1.5rem !important; }
.key-data-input { background-color: #fff8e1 !important; border: 1px solid #ffecb3 !important; }
.key-data-input:focus { border-color: #f57f17 !important; outline: none; box-shadow: 0 0 0 2px rgba(245, 127, 23, 0.2) !important; }
/*==========================================================
  SECCIÓN 6 - LISTADOS Y FILTROS (DATA LISTS)
==========================================================*/
.toolbar-container { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.filters-left-column { display: flex; flex-direction: column; gap: 0.3rem; }
.filters-group { display: flex; align-items: center; gap: 1rem; background-color: #f5bd70; border: 1px solid #f0dfbd; border-radius: 15px; padding: 0.6rem 1rem; box-shadow: 0 2px 5px rgba(243, 175, 82, 0.1); }
.filter-item { position: relative; }
.filter-item::after { content: "\25BE"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c-primary-hover); font-size: 1rem; }
.search-column-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.input-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fbfbfb; border: 1px solid #e0e0e0; border-radius: 10px; padding: 0.4rem 2rem 0.4rem 1rem; font-size: 0.9rem; color: #555; font-weight: 500; cursor: pointer; min-width: 100px; transition: all 0.2s ease; }
.input-select:hover { border-color: var(--c-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.input-select:focus { outline: none; border-color: var(--c-primary-hover); }
.search-standalone { position: relative; width: 280px; margin-left: auto; margin-top: 0.4rem; }
.input-searcher { width: 100%; padding: 0.6rem 1rem 0.6rem 2.5rem; border: 1px solid #ddd; border-radius: 50px; font-size: 0.9rem; transition: all 0.3s ease; box-sizing: border-box; }
.input-searcher:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px rgba(243, 175, 82, 0.1); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 1rem; pointer-events: none; }
.btn-reset { font-size: 0.75rem; font-weight: 600; color: var(--c-primary-hover); background-color: transparent; border: 1px solid var(--c-primary); border-radius: 20px; padding: 0.2rem 0.8rem; cursor: pointer; transition: all 0.2s ease; align-self: flex-start; margin-left: 0.5rem; }
.btn-reset:hover { background-color: var(--c-primary); color: white; text-decoration: none; }
.data-list-wrapper { display: block; width: 100%; }
.data-row { display: grid; gap: 1rem; padding: 0.4rem 0.8rem; align-items: center; background-color: white; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.header-row { background-color: var(--c-primary); color: black; font-weight: bold; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-top: 1px solid var(--border-light); border-radius: 8px 8px 0 0; }
.header-row span { font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; color: inherit !important; text-transform: uppercase !important; }
.item-row { transition: background-color 0.2s ease; font-size: 0.75rem; color: #555; }
.item-row:hover { background-color: #f9eeda; }
.col-text { color: black; font-size: 0.9rem; }
.col-id { font-size: 0.9rem; }
.col-main { font-weight: 600; text-transform: uppercase; }
.col-main a { color: #f39c12; text-decoration: none; transition: color 0.2s; }
.col-main a:hover { color: var(--c-primary-active); text-decoration: underline; }
.col-number, .col-right { text-align: right; }
.col-center { text-align: center; font-size: 0.9rem; }
.results-footer-wrapper { display: flex; justify-content: flex-start; margin-top: 1rem; margin-bottom: 0.5rem; }
.counter-box { display: inline-flex; align-items: center; gap: 0.4rem; background-color: white; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600; color: #666; }
.count-value { color: var(--c-primary-hover); font-weight: bold; font-size: 0.9rem; }
.pagination-controls { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.pagination-btn, .pagination-number { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; background-color: white; border: 1px solid #ddd; border-radius: 6px; color: var(--text-main); font-size: 0.7rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s ease; }
.pagination-btn { background-color: #fdf8f2; border-color: #eaddca; color: #666; }
.pagination-btn:hover, .pagination-number:hover { background-color: var(--c-primary); border-color: var(--c-primary); color: white; }
.pagination-number.active { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: white; cursor: default; }
.first, .last { letter-spacing: -2px; font-weight: bold; color: var(--text-light); }
.truncate-box { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/*==========================================================
  SECCIÓN 7 - BADGES, ESTADOS Y ALERTAS VISUALES
==========================================================*/
.badge-count { background-color: #fff; border: 1px solid #e0e0e0; color: #666; padding: 1px 6px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-block; min-width: 16px; text-align: center; }
.badge-error { background-color: #fdecea; color: var(--c-danger); border: 1px solid #fadbd8; padding: 1px 6px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; display: inline-block; min-width: 16px; text-align: center; }
.status-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; }
.status-planned  { background-color: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.status-ongoing  { background-color: #e8f5e9; color: var(--c-success); border: 1px solid #c8e6c9; }
.status-finished { background-color: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; }
.status-error    { background-color: #ffebee; color: var(--c-danger-dark); border: 1px solid #ffcdd2; }
.status-warning  { background-color: #fff8e1; color: var(--c-warning); border: 1px solid #ffecb3; }
.status-cancelled { background-color: #fee2e2; color: #991b1b; border: 1px solid #f87171; }
.status-suspended { background-color: #ffedd5; color: #c2410c; border: 1px solid #fb923c; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; vertical-align: middle;}
.dot-green { background-color: #2ecc71; box-shadow: 0 0 4px rgba(46, 204, 113, 0.4); }
.dot-yellow { background-color: #f1c40f; box-shadow: 0 0 4px rgba(241, 196, 15, 0.4); }
.dot-red { background-color: var(--c-danger); box-shadow: 0 0 4px rgba(231, 76, 60, 0.4); }
.dot-gray { background-color: #bdc3c7; }
.price-tag { background-color: #f1f8e9; color: var(--c-success-hover); border: 1px solid #c8e6c9; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 700;}
.price-tag.empty { background-color: #f5f5f5; color: var(--text-light); border-color: #e0e0e0; font-weight: normal; }
/*==========================================================
  SECCIÓN 8 - VISTA DE DETALLES E INFOS GENERALES
==========================================================*/
.item-detail-card { background-color: var(--bg-card); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05); }
.compact-header { padding: 1.5rem; }
.header-main-row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 1.5rem; }
.header-left-col { flex: 1; }
.header-right-col { display: flex; flex-shrink: 0; gap: 0.5rem; margin-top: 0.2rem;}
.title-group { display: flex; align-items: center; gap: 1rem; }
.title-group h1 { font-size: 1.3rem; margin: 0; color: #2c3e50; font-weight: 700; }
.subtitle-group { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #666; }
.divider-dot { color: #ccc; }
.course-name, .family-name { font-weight: 600; color: #444; }
.header-divider { border: 0; border-top: 1px solid var(--border-light); margin: 1rem 0; }
.header-data-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.data-section { display: flex; gap: 2.5rem; }
.financial-section { border-left: 2px dashed var(--border-light); padding-left: 2.5rem; }
.data-item { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; text-align: center; }
.data-label { font-size: 0.7rem; color: var(--text-light); font-weight: bold; letter-spacing: 0.05em; }
.data-value { font-size: 0.8rem; color: #111; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.price-tags-wrapper { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.detail-rosters-container { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.roster-section { background: transparent; margin-bottom: 0; }
.roster-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--c-primary); }
.roster-header h2 { font-size: 0.95rem; color: #2c3e50; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.empty-roster { padding: 2rem; text-align: center; background-color: white; color: var(--text-light); font-size: 0.85rem; font-style: italic; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
/*==========================================================
  SECCIÓN 9 - MODALES, ÉXITO Y ERRORES
==========================================================*/
.success-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.6); border-radius: 8px; z-index: 10; backdrop-filter: blur(2px); animation: fadeIn 0.3s ease-out; }
.success-card { background-color: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); text-align: center; border: 1px solid #e0e0e0; max-width: 320px; transform: translateY(20px); animation: slideUp 0.4s ease-out forwards; }
.modal-danger { border-top: 4px solid #f87171; }
.modal-danger h4 { color: #991b1b; }
.modal-warning { border-top: 4px solid #fb923c; }
.modal-warning h4 { color: #c2410c; }
.error-zone { margin-top: 1rem; text-align: center; }
.msg-error { color: var(--c-danger); background-color: #fdecea; display: inline-block; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; font-weight: 600; margin: 0; }
.message-info-box { margin: 1.5rem auto; padding: 1.5rem; max-width: 400px; background-color: #fafafa; border: 1px dashed #dcdcdc; border-radius: 8px; text-align: center; color: #666; line-height: 1.4; font-size: 0.9rem; }
.message-info-box::before { content: "Ø"; display: block; font-size: 2rem; color: #ccc; margin-bottom: 0.3rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.success-icon { width: 60px; height: 60px; background-color: var(--c-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3); }
.success-icon svg { width: 32px; height: 32px; }
.success-card h4 { margin: 0 0 0.5rem 0; color: #2c3e50; font-size: 1.4rem; font-weight: 700; }
.success-card p { color: #7f8c8d; font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.5; }
.success-actions { display: flex; flex-direction: column; gap: 0.8rem; }
.success-actions .btn-primary, .success-actions .btn-secondary { width: 100%; }
.info-message-container { max-width: 600px; padding: 30px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 0 auto; text-align: center; }
.info-message-container h1 { font-size: 1.8rem; color: var(--c-primary-hover); margin: 0 0 0.5rem 0; line-height: 1.2; }
.info-message-container h2 { font-size: 1.4rem; color: black; margin: 0.5rem 0 1rem 0; }
.info-action-button { display: inline-block; margin-top: 1.5rem; padding: 0.8rem 1.5rem; background-color: var(--c-primary-hover); color: white; text-decoration: none; font-weight: bold; border-radius: 6px; transition: background-color 0.3s ease; }
.info-action-button:hover { background-color: var(--c-primary-active); }
.notice-box { margin-top: 0.75rem; padding: 0.35rem 0.75rem; font-size: 0.85rem; border-radius: 4px; display: inline-block; }
.notice-box a { font-weight: 600; text-decoration: underline; margin-left: 0.25rem; }
.notice-muted { background-color: #f3f4f6; color: #6b7280; border-left: 3px solid #9ca3af; }
.notice-muted a { color: #4b5563; }
.notice-info { background-color: #eff6ff; color: #3b82f6; border-left: 3px solid #60a5fa; }
.notice-info a { color: #1d4ed8; }
/*==========================================================
  SECCIÓN 10 - TOOLTIPS
==========================================================*/
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(51, 51, 51, 0.95); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; z-index: 9999; margin-top: 10px; }
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
[data-tooltip]::before { content: ""; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent var(--text-main) transparent; opacity: 0; visibility: hidden; z-index: 1000; }
[data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 1; visibility: visible; }
/*==========================================================
  SECCIÓN 11 - DASHBOARD Y KPIs (PLANIFICACIÓN)
==========================================================*/
.kpi-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.kpi-card { background-color: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: transform 0.2s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.05); }
.kpi-card.kpi-alert { border-left: 4px solid var(--c-danger); background-color: #fffaf9; }
.kpi-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.kpi-value { font-size: 2rem; font-weight: 800; color: #2c3e50; line-height: 1; }
.kpi-subtext { font-size: 0.8rem; color: var(--text-light); margin-top: 0.5rem; font-weight: 500; }
.kpi-highlight { color: var(--c-success); font-weight: 700; }
/*==========================================================
  SECCIÓN 12 - VISTA DE PERFIL Y FACTURACIÓN
==========================================================*/
#fact-container { display: flex; flex-wrap: wrap; gap: 15px; }
.profile-card { width: calc(50% - 7.5px); box-sizing: border-box; border: 2px solid #eaeaea; background-color: #fff; padding: 15px 20px; margin-bottom: 0; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; }
.profile-card:hover:not(.active) { border-color: #ffecb3; background-color: #fffdfb; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.profile-card.active { border-color: var(--naranja-txt) !important; background-color: #fff3e6 !important; box-shadow: 0 4px 12px rgba(230, 126, 34, 0.15); }
.profile-card.active strong { color: var(--naranja-txt); }
.profile-card .check-icon { color: transparent; font-size: 1.2rem; transition: color 0.2s ease; }
.profile-card.active .check-icon { color: var(--naranja-txt); }
@media (max-width: 768px) { .profile-card { width: 100%; } }
.flx-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.rep-info-box { background-color: #f9f9f9; border: 1px solid #eee; padding: 15px; border-radius: 8px; max-width: 450px; margin: 0 auto; text-align: center; color: #555; }
.rep-info-box strong { display: block; color: #333; font-size: 16px; margin-bottom: 5px; }
/*==========================================================
--- SECCIÓN 13 - PÁGINA DE ERROR 404 ---
==========================================================*/
.error-page-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; text-align: center; background-color: #f4f7f9; }
.error-container { max-width: 600px; }
.error-container h1 { font-size: 10rem; font-weight: bold; color: #e0e0e0; margin: 0; line-height: 1; }
.error-container h2 { font-size: 2rem; color: #2c3e50; margin-top: -2.5rem; margin-bottom: 1rem; }
.error-container p { color: #777; font-size: 1.1rem; line-height: 1.6; }
.error-button { display: inline-block; margin-top: 2rem; padding: 0.8rem 1.5rem; background-color: #f39c12; color: white; text-decoration: none; font-weight: bold; border-radius: 6px; transition: background-color 0.3s ease; }
.error-button:hover { background-color: #e67e22; }
/*==========================================================
  SECCIÓN 14 - PORTAL WEB (PÚBLICO) ENCAPSULADO 
==========================================================*/
.portal-web { --blanco: #FFF; --negro: #000; --gris: #F3F3F3; --naranja: #F8B334; --naranja-txt: #E08700; --master-poe: #742949; --master-nar: #9D2828; --master-prf: #530101; --master-obr: #9D2828; --curso-p: #EDE3BE; --curso-o: #FFC715; --curso-v: #F0D57E; --curso-v-tag: #DDC473; --c-beige: #D9D1B3; --unidad: 15px; font-family: 'Helvetica W01', sans-serif; font-size: 17px; line-height: 1.3em; color: var(--negro); background-color: #f4f7f9; min-height: 100vh; padding: 40px 15px; }
.portal-web * { margin: 0; padding: 0; border: 0; outline: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0); box-sizing: border-box; font-family: 'Helvetica W01', sans-serif; }
.portal-web article, .portal-web aside, .portal-web details, .portal-web figcaption, .portal-web figure, .portal-web footer, .portal-web header, .portal-web hgroup, .portal-web nav, .portal-web section, .portal-web summary { display:block; }
.portal-web audio, .portal-web canvas, .portal-web video { display:inline-block; *display:inline; *zoom:1; }
.portal-web audio:not([controls]) { display:none; height:0; }
.portal-web [hidden] { display:none; }
.portal-web a:focus { outline:none; }
.portal-web a:active, .portal-web a:hover { outline:0; }
.portal-web h1, .portal-web h2, .portal-web h3, .portal-web h4, .portal-web h5, .portal-web h6, .portal-web p { font-weight: 400; font-style: normal; }
.portal-web h1, .portal-web h2, .portal-web h3, .portal-web h4, .portal-web h5, .portal-web h6, .portal-web p, .portal-web ol, .portal-web ul, .portal-web li, .portal-web pre, .portal-web address { font-size: 100%; }
.portal-web b, .portal-web strong { font-weight: 700; }
.portal-web i, .portal-web em { font-style: italic; }
.portal-web address { font-style: normal; }
.portal-web abbr[title] { border-bottom: 1px dotted; }
.portal-web blockquote { margin: 10px; }
.portal-web dfn { font-style: italic; }
.portal-web mark { background: #ff0; color: #000; }
.portal-web code, .portal-web kbd, .portal-web pre, .portal-web samp { font-family: monospace, serif; font-size: 100%; }
.portal-web pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
.portal-web q { quotes: none; }
.portal-web q:before, .portal-web q:after { content:''; content:none; }
.portal-web small { font-size: 80%; }
.portal-web sub, .portal-web sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
.portal-web sup { top: -0.5em; }
.portal-web sub { bottom: -0.25em; }
.portal-web dl, .portal-web menu, .portal-web ol, .portal-web ul, .portal-web li { margin: 0; }
.portal-web dd { margin: 0 0 0 1em; }
.portal-web menu, .portal-web ol, .portal-web ul, .portal-web li { padding: 0; }
.portal-web nav ul, .portal-web nav ol { list-style: none; list-style-image: none; }
.portal-web img { border: 0; -ms-interpolation-mode: bicubic; }
.portal-web figure { margin: 0; }
.portal-web form { margin: 0; }
.portal-web form, .portal-web textarea, .portal-web input, .portal-web select { outline: none; text-indent: 0; margin: 0; padding: 0; border: 0; white-space: normal; }
.portal-web fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 3px 6px 7px; }
.portal-web legend { border: 0; padding: 0; white-space: normal; }
.portal-web button, .portal-web input, .portal-web select, .portal-web textarea { font-size: 100%; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 0; background: transparent; }
.portal-web button, .portal-web input[type="button"], .portal-web input[type="reset"], .portal-web input[type="submit"] { cursor: pointer; }
.portal-web button[disabled], .portal-web input[disabled] { cursor: default; }
.portal-web input[type="checkbox"], .portal-web input[type="radio"] { display: inline-block; padding: 0; border: 1px solid #000; height: 16px; width: 16px; cursor: pointer; }
.portal-web input[type="radio"] { border-radius: 50%; }
.portal-web button::-moz-focus-inner, .portal-web input::-moz-focus-inner { border: 0; padding: 0; }
.portal-web textarea { overflow: auto; vertical-align: top; resize: vertical; }
.portal-web table { border-collapse: collapse; border-spacing: 0; width: 100%; }
.portal-web select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
.portal-web a { text-decoration: none; font-weight: 700; color: var(--negro); }
.portal-web a:hover, .portal-web a.active { opacity: .5; }
.portal-web button { font-weight: 700; }
.portal-web h1, .portal-web h2, .portal-web h3, .portal-web h4, .portal-web blockquote, .portal-web h1 *, .portal-web h2 *, .portal-web h3 *, .portal-web h4 *, .portal-web blockquote * { font-family: 'Ibarra Real Nova', serif; font-weight: 700; font-variant-ligatures: no-common-ligatures; }
.portal-web h1 { font-size: 50px; line-height: 1.1em; }
.portal-web h2 { font-size: 35px; line-height: 1.125em; }
.portal-web h3, .portal-web blockquote { font-size: 29px; line-height: 1.07em; }
.portal-web h4 { font-size: 21px; line-height: 1.095em; }
.portal-web h5, .portal-web label, .portal-web cite { font-size: 11px; line-height: 1.818em; letter-spacing: 0.25px; text-transform: uppercase; }
.portal-web .txt-align-l { text-align: left; }
.portal-web .txt-align-c { text-align: center; }
.portal-web .txt-align-r { text-align: right; }
.portal-web .txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-web .row-flx, .portal-web .col-flx { display: flex; display: -webkit-flex; }
.portal-web .row-flx { flex-direction: row; -webkit-flex-direction: row; }
.portal-web .col-flx { flex-direction: column; -webkit-flex-direction: column; }
.portal-web .flx-w { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.portal-web .row { width: 100%; }
.portal-web .center { margin: auto; }
.portal-web .col-main { width: 100%; max-width: 1260px; }
.portal-web .padd { padding: var(--unidad); }
.portal-web .padd-h { padding: 0 var(--unidad); }
.portal-web .col1-12 { width: 8.333%; } .portal-web .col2-12 { width: 16.666%; } .portal-web .col3-12 { width: 25%; } .portal-web .col4-12 { width: 33.333%; } .portal-web .col5-12 { width: 41.666%; } .portal-web .col6-12 { width: 50%; } .portal-web .col7-12 { width: 58.333%; } .portal-web .col8-12 { width: 66.666%; } .portal-web .col9-12 { width: 75%; } .portal-web .col10-12 { width: 83.333%; } .portal-web .col11-12 { width: 91.333%; } .portal-web .col12-12 { width: 100%; }
.portal-web .btn { display: inline-flex; width: auto; height: 40px; line-height: 30px; border-radius: 20px; padding: 5px 15px; white-space: nowrap; background-color: var(--negro); color: var(--blanco); }
.portal-web .btn:hover { opacity: 1; box-shadow: 0 0 20px rgba(0,0,0,.2); }
.portal-web .content { padding: 60px 0; opacity: 1; }
.portal-web .content img { max-width: 100%; height: auto; }
.portal-web .row-check label { margin-left: 10px; text-transform: none; font-size: 17px; line-height: 1.1em; padding-bottom: 0; }
.portal-web .row-check label a { font-weight: 400; text-decoration: underline; }
.portal-web .content-mod-form-group { padding-bottom: 40px; }
.portal-web .content-mod-form-group .btn { min-width: 130px; margin-top: 15px; display: inline-flex; justify-content: space-between; }
.portal-web .row-form { padding-bottom: 10px; position: relative; }
.portal-web input, .portal-web select, .portal-web textarea { width: 100%; min-height: 40px; line-height: 40px; border-bottom: 2px solid var(--negro); font-size: 17px; }
.portal-web label { padding-bottom: 5px; display: block; }
.portal-web input[type=checkbox], .portal-web input[type=radio] { width: 20px; height: 20px; min-height: 20px; border: 2px solid var(--negro); padding: 0; background-position: center; opacity: .5; }
.portal-web input[type=checkbox] { border-radius: 4px; flex-shrink: 0; }
.portal-web input[type=radio] { border-radius: 50%; border: 2px solid var(--negro); flex-shrink: 0; }
.portal-web textarea { border-top: 2px solid var(--gris); line-height: 1.2em; height: 100px; padding: 10px 0; }
.portal-web select { background: url(../img/icon-arrow-b-b.svg) no-repeat 100% 50%; }
.portal-web input[type=checkbox]:focus, .portal-web input[type=radio]:focus { border-color: var(--negro); }
.portal-web input[type=checkbox] + label, .portal-web input[type=radio] + label { opacity: .5; cursor: pointer; }
.portal-web input[type=checkbox]:checked + label, .portal-web input[type=radio]:checked + label { opacity: 1; }
.portal-web input:focus, .portal-web select:focus, .portal-web textarea:focus { border-color: var(--naranja); }
.portal-web input[type=submit] { font-weight: 700; padding-top: 0; padding-bottom: 0; border: 0; }
.portal-web input[type=submit].btn { color: var(--blanco); }
.portal-web input[disabled], .portal-web input[disabled] + label { cursor: not-allowed; opacity: .2; }
.portal-web .form-wrapper { max-width: 850px; margin: 0 auto; }
.portal-web .page-title { margin-bottom: 5px !important; line-height: 1.2em; color: #2c3e50; font-size: 32px; }
.portal-web .form-card { background-color: #ffffff; border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eaeaea; }
.portal-web .form-card h3:first-child { margin-top: 10px; border-bottom: 1px solid var(--gris); padding-bottom: 15px; }
@media (max-width: 760px) { .portal-web .form-card { padding: 20px; } .portal-web .page-title { font-size: 24px; } .portal-web .nav-brand { margin-bottom: 30px !important; } .portal-web .nav-brand img { max-height: 50px !important; } }
.portal-web input[type=radio]:checked { background: radial-gradient(circle, var(--naranja-txt) 45%, transparent 50%) !important; border-color: var(--naranja-txt) !important; opacity: 1; }
.portal-web input[type=checkbox]:checked { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E08700' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center !important; background-size: 14px !important; border-color: var(--naranja-txt) !important; opacity: 1; }
.portal-web input[type=checkbox]:focus, .portal-web input[type=radio]:focus { border-color: var(--naranja-txt); box-shadow: 0 0 0 2px rgba(224, 135, 0, 0.2); }
.portal-web h3 { margin-bottom: 25px !important; }
.portal-web h4 { margin-bottom: 8px !important; }
.portal-web p.legal { margin-top: 5px !important; margin-bottom: 30px !important; color: #555; line-height: 1.4em; }
@media (max-width: 1280px) { .portal-web .col1-12-l { width: 8.333%; } .portal-web .col2-12-l { width: 16.666%; } .portal-web .col3-12-l { width: 25%; } .portal-web .col4-12-l { width: 33.333%; } .portal-web .col5-12-l { width: 41.666%; } .portal-web .col6-12-l { width: 50%; } .portal-web .col7-12-l { width: 58.333%; } .portal-web .col8-12-l { width: 66.666%; } .portal-web .col9-12-l { width: 75%; } .portal-web .col10-12-l { width: 83.333%; } .portal-web .col11-12-l { width: 91.333%; } .portal-web .col12-12-l { width: 100%; } .portal-web h1 { font-size: 40px; } .portal-web h2 { font-size: 31px; } .portal-web h3, .portal-web blockquote { font-size: 23px; } .portal-web h4 { font-size: 20px; } .portal-web .row-check label, .portal-web input, .portal-web select, .portal-web textarea { font-size: 15px; } }
@media (max-width: 1020px) { .portal-web .col1-12-m { width: 8.333%; } .portal-web .col2-12-m { width: 16.666%; } .portal-web .col3-12-m { width: 25%; } .portal-web .col4-12-m { width: 33.333%; } .portal-web .col5-12-m { width: 41.666%; } .portal-web .col6-12-m { width: 50%; } .portal-web .col7-12-m { width: 58.333%; } .portal-web .col8-12-m { width: 66.666%; } .portal-web .col9-12-m { width: 75%; } .portal-web .col10-12-m { width: 83.333%; } .portal-web .col11-12-m { width: 91.333%; } .portal-web .col12-12-m { width: 100%; } .portal-web h1 { font-size: 35px; } .portal-web h2 { font-size: 29px; } .portal-web h3, .portal-web blockquote { font-size: 21px; } .portal-web h4 { font-size: 19px; } .portal-web h5, .portal-web label, .portal-web cite { font-size: 10px; } }
@media (max-width: 760px) { .portal-web .col1-12-s { width: 8.333%; } .portal-web .col2-12-s { width: 16.666%; } .portal-web .col3-12-s { width: 25%; } .portal-web .col4-12-s { width: 33.333%; } .portal-web .col5-12-s { width: 41.666%; } .portal-web .col6-12-s { width: 50%; } .portal-web .col7-12-s { width: 58.333%; } .portal-web .col8-12-s { width: 66.666%; } .portal-web .col9-12-s { width: 75%; } .portal-web .col10-12-s { width: 83.333%; } .portal-web .col11-12-s { width: 91.333%; } .portal-web .col12-12-s { width: 100%; } .portal-web h1 { font-size: 29px; } .portal-web h2 { font-size: 23px; } .portal-web h4 { font-size: 17px; } .portal-web .row-check label, .portal-web input, .portal-web select, .portal-web textarea { font-size: 15px; } }
@media (max-width: 580px) { .portal-web { --unidad: 10px; } .portal-web .col1-12-xs { width: 8.333%; } .portal-web .col2-12-xs { width: 16.666%; } .portal-web .col3-12-xs { width: 25%; } .portal-web .col4-12-xs { width: 33.333%; } .portal-web .col5-12-xs { width: 41.666%; } .portal-web .col6-12-xs { width: 50%; } .portal-web .col7-12-xs { width: 58.333%; } .portal-web .col8-12-xs { width: 66.666%; } .portal-web .col9-12-xs { width: 75%; } .portal-web .col10-12-xs { width: 83.333%; } .portal-web .col11-12-xs { width: 91.333%; } .portal-web .col12-12-xs { width: 100%; } .portal-web h1 { font-size: 27px; } .portal-web h2 { font-size: 23px; } .portal-web h4 { font-size: 15px; } .portal-web .row-check label, .portal-web input, .portal-web select, .portal-web textarea { font-size: 13px; } }

/*==========================================================
OPTIMIZACIÓN RESPONSIVE
==========================================================*/
@media (max-width: 768px) {
    /* Forzar todas las columnas estructurales al 100% del ancho */
    .portal-web .col1-12, .portal-web .col2-12, .portal-web .col3-12, 
    .portal-web .col4-12, .portal-web .col5-12, .portal-web .col6-12, 
    .portal-web .col7-12, .portal-web .col8-12, .portal-web .col9-12, 
    .portal-web .col10-12, .portal-web .col11-12 {
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Separar los campos cuando se apilan verticalmente */
    .portal-web .row-form {
        margin-bottom: 12px;
    }

    /* Ajustar paddings de las tarjetas y modales para ganar espacio en pantalla */
    .portal-web .form-card, .success-card {
        padding: 25px 20px !important;
        width: 100% !important;
        border-radius: 12px !important;
    }

    /* Forzar el apilamiento de la cabecera en el perfil de estudiante */
    .header-main-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.2rem !important;
    }
    .header-right-col {
        justify-content: flex-start !important;
        width: 100%;
    }
    
    /* El contenedor principal de los modales en 1 columna */
    .content-mod-form .row-flx {
        flex-direction: column !important;
    }
    
    /* Botones al 100% de ancho para facilitar el clic táctil */
    .portal-web .content-mod-form-group .btn, 
    .portal-web .form-actions .btn {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

/* Ajuste adicional para pantallas pequeñas */
@media (max-width: 600px) {
    .collapse-left { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 5px; 
    }
    .collapse-right { margin-left: 0; margin-top: 10px; }
}