<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Diseño para Formularios - IGSA</title>
    <style>
        /*---------------------------------------------------
         DESIGN SYSTEM - FORMULARIOS IGSA
         Sistema de componentes reutilizables
        ---------------------------------------------------*/

        /* Variables CSS Unificadas */
        :root {
            /* Colores principales */
            --primary-color: #4e8cff;
            --secondary-color: #6c757d;
            --success-color: #00e4d0;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;

            /* Estados hover */
            --hover-primary: #0056b3;
            --hover-secondary: #5a6268;
            --hover-success: #218838;

            /* Fondos */
            --bg-light: #f8f9fa;
            --bg-white: #ffffff;
            --bg-disabled: #e9ecef;

            /* Bordes */
            --border-color: #e9ecef;
            --border-focus: var(--primary-color);
            --border-radius: 8px;
            --border-radius-sm: 4px;

            /* Espaciados */
            --spacing-xs: 5px;
            --spacing-sm: 10px;
            --spacing-md: 15px;
            --spacing-lg: 20px;
            --spacing-xl: 25px;

            /* Tipografía */
            --font-size-small: 12px;
            --font-size-normal: 14px;
            --font-size-large: 18px;
            --font-size-xl: 24px;

            /* Sombras */
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
            --shadow-focus: 0 0 5px rgba(78, 140, 255, 0.5);
        }

        /* Reset básico */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: var(--bg-light);
            margin: 0;
            padding: 20px;
        }

        /*---------------------------------------------------
         CONTENEDORES BASE
        ---------------------------------------------------*/

        /* Contenedor principal de formulario */
        .form-container {
            background-color: var(--bg-white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
            border: 3px solid transparent;
            border-image-slice: 1;
            border-image-source: linear-gradient(45deg, var(--primary-color), var(--success-color));
        }

        /* Contenedor de sección informativa (solo lectura) */
        .info-container {
            background-color: var(--bg-light);
            border-radius: var(--border-radius);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
            border: 1px solid var(--border-color);
        }

        /*---------------------------------------------------
         TÍTULOS Y ENCABEZADOS
        ---------------------------------------------------*/

        .form-title {
            text-align: center;
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: #253858;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.6em;
        }

        .form-title::after {
            content: "";
            display: block;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color));
            border-radius: 2px;
            margin: 0.4em auto 0;
        }

        .section-title {
            font-size: var(--font-size-large);
            font-weight: 600;
            color: #253858;
            margin: var(--spacing-lg) 0 var(--spacing-md) 0;
            position: relative;
            padding-bottom: 0.3em;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color));
            border-radius: 2px;
            margin-top: 3px;
        }

        /*---------------------------------------------------
         LAYOUTS DE CAMPOS
        ---------------------------------------------------*/

        /* Layout horizontal (filas) */
        .field-row {
            display: flex;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
            align-items: flex-end;
        }

        /* Layout vertical (columnas) */
        .field-column {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
        }

        /* Campo individual */
        .field-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Campo de tamaño específico */
        .field-group--small { flex: 0 0 150px; }
        .field-group--medium { flex: 0 0 250px; }
        .field-group--large { flex: 1; }
        .field-group--full { flex: 1 1 100%; }

        /*---------------------------------------------------
         CAMPOS DE ENTRADA
        ---------------------------------------------------*/

        /* Label base */
        .field-label {
            font-size: var(--font-size-normal);
            font-weight: 600;
            color: #333;
            margin-bottom: var(--spacing-xs);
            display: block;
        }

        .field-label--required::after {
            content: '*';
            color: var(--danger-color);
            margin-left: 3px;
        }

        /* Input base */
        .field-input {
            width: 100%;
            padding: var(--spacing-sm) 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-normal);
            background-color: var(--bg-white);
            transition: all 0.3s ease;
        }

        .field-input:focus {
            outline: none;
            border-color: var(--border-focus);
            box-shadow: var(--shadow-focus);
        }

        /* Estados de campos */
        .field-input:disabled {
            background-color: var(--bg-disabled);
            color: var(--secondary-color);
            cursor: not-allowed;
        }

        .field-input--error {
            border-color: var(--danger-color);
            box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
        }

        .field-input--warning {
            border-color: var(--warning-color);
            box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
        }

        .field-input--success {
            border-color: var(--success-color);
        }

        /*---------------------------------------------------
         MENSAJES DE VALIDACIÓN
        ---------------------------------------------------*/

        .field-message {
            font-size: var(--font-size-small);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .field-message--error {
            color: var(--danger-color);
        }

        .field-message--warning {
            color: #e65100;
        }

        .field-message--success {
            color: #2e7d32;
        }

        /*---------------------------------------------------
         ALERTAS DE SISTEMA
        ---------------------------------------------------*/

        .alert {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-sm);
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            margin: var(--spacing-md) 0;
            border-left: 4px solid;
        }

        .alert__icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .alert__content {
            flex: 1;
            line-height: 1.5;
        }

        .alert--info {
            background-color: #e3f2fd;
            border-left-color: var(--info-color);
            color: #0d47a1;
        }

        .alert--success {
            background-color: #e8f5e8;
            border-left-color: var(--success-color);
            color: #1b5e20;
        }

        .alert--warning {
            background-color: #fff8e1;
            border-left-color: var(--warning-color);
            color: #e65100;
        }

        .alert--error {
            background-color: #ffebee;
            border-left-color: var(--danger-color);
            color: #b71c1c;
        }

        /*---------------------------------------------------
         ESTADOS DE CARGA
        ---------------------------------------------------*/

        .btn--loading {
            position: relative;
            color: transparent;
        }

        .btn__spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /*---------------------------------------------------
         BARRAS DE PROGRESO
        ---------------------------------------------------*/

        .progress-bar {
            width: 100%;
            height: 24px;
            background-color: var(--bg-disabled);
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }

        .progress-bar__fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color));
            border-radius: 12px;
            transition: width 0.3s ease;
        }

        .progress-bar__text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: var(--font-size-small);
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        /*---------------------------------------------------
         ELEMENTOS DE AYUDA
        ---------------------------------------------------*/

        .help-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            background-color: var(--info-color);
            color: white;
            border-radius: 50%;
            font-size: 12px;
            font-weight: bold;
            margin-left: 6px;
            cursor: help;
            position: relative;
        }

        .field-help {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
            margin-top: 4px;
            line-height: 1.4;
        }

        .field-optional {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
            font-style: italic;
            margin-left: 6px;
        }

        /*---------------------------------------------------
         SEPARADORES
        ---------------------------------------------------*/

        .divider {
            height: 1px;
            background-color: var(--border-color);
            margin: var(--spacing-lg) 0;
            position: relative;
        }

        .divider--with-text {
            text-align: center;
            background: none;
            height: auto;
        }

        .divider--with-text::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--border-color);
        }

        .divider--with-text span {
            background-color: var(--bg-white);
            padding: 0 var(--spacing-md);
            color: var(--secondary-color);
            font-size: var(--font-size-small);
            font-weight: 500;
            position: relative;
            z-index: 1;
        }

        /*---------------------------------------------------
         BADGES Y ETIQUETAS
        ---------------------------------------------------*/

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: var(--font-size-small);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge--primary {
            background-color: var(--primary-color);
            color: white;
        }

        .badge--success {
            background-color: var(--success-color);
            color: white;
        }

        .badge--warning {
            background-color: var(--warning-color);
            color: #333;
        }

        .badge--error {
            background-color: var(--danger-color);
            color: white;
        }

        .badge--secondary {
            background-color: var(--secondary-color);
            color: white;
        }

        /*---------------------------------------------------
         NAVEGACIÓN DE PASOS
        ---------------------------------------------------*/

        .steps-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: var(--spacing-lg) 0;
            position: relative;
        }

        .steps-nav::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 5%;
            right: 5%;
            height: 2px;
            background-color: var(--border-color);
            z-index: 0;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
            background-color: var(--bg-white);
            padding: 0 var(--spacing-sm);
        }

        .step__number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: var(--spacing-xs);
            border: 2px solid;
        }

        .step__label {
            font-size: var(--font-size-small);
            text-align: center;
            max-width: 80px;
        }

        .step--completed .step__number {
            background-color: var(--success-color);
            border-color: var(--success-color);
            color: white;
        }

        .step--completed .step__label {
            color: var(--success-color);
        }

        .step--active .step__number {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .step--active .step__label {
            color: var(--primary-color);
            font-weight: 600;
        }

        .step--pending .step__number {
            background-color: var(--bg-white);
            border-color: var(--border-color);
            color: var(--secondary-color);
        }

        .step--pending .step__label {
            color: var(--secondary-color);
        }

        /*---------------------------------------------------
         ACORDEONES
        ---------------------------------------------------*/

        .accordion {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .accordion__item {
            border-bottom: 1px solid var(--border-color);
        }

        .accordion__item:last-child {
            border-bottom: none;
        }

        .accordion__header {
            width: 100%;
            background: none;
            border: none;
            padding: var(--spacing-md);
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: var(--font-size-normal);
            font-weight: 500;
            background-color: var(--bg-light);
        }

        .accordion__header:hover {
            background-color: #f0f0f0;
        }

        .accordion__header--active {
            background-color: #e3f2fd;
            color: var(--primary-color);
        }

        .accordion__icon {
            font-size: 18px;
            font-weight: bold;
        }

        .accordion__content {
            display: none;
            padding: var(--spacing-md);
            background-color: var(--bg-white);
        }

        .accordion__content--open {
            display: block;
        }

        /*---------------------------------------------------
         LISTAS DINÁMICAS
        ---------------------------------------------------*/

        .dynamic-list {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .dynamic-list__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-bottom: 1px solid var(--border-color);
        }

        .dynamic-list__header h4 {
            margin: 0;
            font-size: var(--font-size-normal);
            color: #333;
        }

        .dynamic-list__item {
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            background-color: var(--bg-white);
        }

        .dynamic-list__item:last-child {
            border-bottom: none;
        }

        .dynamic-list__item:hover {
            background-color: #fafafa;
        }

        /* Tipos específicos de campos */
        .field-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .field-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 8px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 40px;
        }

        /*---------------------------------------------------
         CAMPOS DE INFORMACIÓN (SOLO LECTURA)
        ---------------------------------------------------*/

        .info-field {
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-sm) 12px;
            font-size: var(--font-size-normal);
            color: #555;
            min-height: 38px;
            display: flex;
            align-items: center;
        }

        .info-field--emphasized {
            background-color: #e3f2fd;
            border-color: var(--info-color);
            font-weight: 500;
        }

        /*---------------------------------------------------
         CHECKBOXES Y RADIOS
        ---------------------------------------------------*/

        .checkbox-group, .radio-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .checkbox-group--inline, .radio-group--inline {
            flex-direction: row;
            gap: var(--spacing-lg);
        }

        .checkbox-item, .radio-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            cursor: pointer;
        }

        .checkbox-input, .radio-input {
            width: 18px;
            height: 18px;
            margin: 0;
            cursor: pointer;
        }

        .checkbox-label, .radio-label {
            font-size: var(--font-size-normal);
            color: #333;
            cursor: pointer;
            margin: 0;
        }

        /*---------------------------------------------------
         BOTONES Y ACCIONES
        ---------------------------------------------------*/

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-normal);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn--primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn--primary:hover {
            background-color: var(--hover-primary);
        }

        .btn--success {
            background-color: var(--success-color);
            color: white;
        }

        .btn--success:hover {
            background-color: var(--hover-success);
        }

        .btn--secondary {
            background-color: var(--secondary-color);
            color: white;
        }

        .btn--secondary:hover {
            background-color: var(--hover-secondary);
        }

        /* Tamaños de botones */
        .btn--small {
            padding: 6px 12px;
            font-size: var(--font-size-small);
        }

        .btn--large {
            padding: 14px 28px;
            font-size: var(--font-size-large);
        }

        /*---------------------------------------------------
         BARRA DE ACCIONES
        ---------------------------------------------------*/

        .action-bar {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-md);
            background-color: var(--bg-white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
        }

        .action-bar__label {
            font-weight: 500;
            white-space: nowrap;
            margin: 0;
        }

        .action-bar__input {
            flex: 1;
            max-width: 300px;
        }

        .action-bar__spacer {
            flex: 1;
        }

        /*---------------------------------------------------
         CONTENEDORES DE BOTONES Y ACCIONES
        ---------------------------------------------------*/

        /* Contenedores base para botones */
        .button-container {
            display: flex;
            margin: var(--spacing-md) 0;
            padding: var(--spacing-sm) 0;
        }

        /* Alineaciones de botones únicos */
        .button-container--center {
            justify-content: center;
        }

        .button-container--right {
            justify-content: flex-end;
        }

        .button-container--left {
            justify-content: flex-start;
        }

        /* Distribuciones para múltiples botones */
        .button-container--justified {
            justify-content: space-between;
            gap: var(--spacing-md);
        }

        .button-container--extremes {
            justify-content: space-between;
        }

        .button-container--center-group {
            justify-content: center;
            gap: var(--spacing-md);
        }

        .button-container--floating {
            justify-content: flex-end;
            align-items: center;
            gap: var(--spacing-md);
        }

        /* Espaciador flexible para botones */
        .button-spacer {
            flex: 1;
        }

        /* Grupo de botones unidos */
        .button-group {
            display: flex;
            margin: var(--spacing-md) 0;
        }

        .button-group .btn {
            border-radius: 0;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
            margin: 0;
        }

        .button-group .btn:first-child {
            border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
        }

        .button-group .btn:last-child {
            border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
            border-right: none;
        }

        .button-group .btn:only-child {
            border-radius: var(--border-radius-sm);
            border-right: none;
        }

        /*---------------------------------------------------
         SECCIONES DE FORMULARIOS ESPECÍFICOS
        ---------------------------------------------------*/

        .section-FormGral {
            background-color: #fafbfc;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: var(--spacing-lg);
            margin: var(--spacing-lg) 0;
            position: relative;
        }

        .section-FormGral::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color));
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }

        /* Espaciado específico para preguntas dentro de secciones */
        .section-FormGral .field-row {
            margin-bottom: var(--spacing-md);
        }

        .section-FormGral .field-row:last-child {
            margin-bottom: 0;
        }

                /*---------------------------------------------------
         TABLAS Y LISTADOS
        ---------------------------------------------------*/

        .table-container {
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            margin: var(--spacing-md) 0;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-size-normal);
            background-color: var(--bg-white);
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .data-table th {
            background-color: var(--bg-light);
            font-weight: 600;
            color: #333;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .data-table tr:hover {
            background-color: #f8f9fa;
        }

        .data-table tr:last-child td {
            border-bottom: none;
        }

        .row-highlighted {
            background-color: #e3f2fd !important;
        }

        .data-table--sortable th.sortable {
            cursor: pointer;
            user-select: none;
            position: relative;
        }

        .data-table--sortable th.sortable:hover {
            background-color: #e9ecef;
        }

        .sort-icon {
            margin-left: 6px;
            opacity: 0.5;
            font-size: 12px;
        }

        .sort-icon--asc,
        .sort-icon--desc {
            opacity: 1;
            color: var(--primary-color);
        }

        .table-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-md);
            gap: var(--spacing-md);
        }

        .table-controls__left,
        .table-controls__right {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .table-controls__select {
            width: auto;
            min-width: 120px;
        }

        .table-controls__search {
            width: 250px;
        }

        .table-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-top: 1px solid var(--border-color);
        }

        .table-pagination__info {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
        }

        .table-pagination__controls {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .bulk-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-sm) var(--spacing-md);
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: var(--border-radius);
            margin-top: var(--spacing-md);
        }

        .bulk-actions__info {
            font-size: var(--font-size-small);
            font-weight: 500;
        }

        .bulk-actions__buttons {
            display: flex;
            gap: var(--spacing-sm);
        }

        .action-buttons {
            display: flex;
            gap: 4px;
        }

        .action-buttons .btn {
            padding: 4px 8px;
            min-width: auto;
        }

        /*---------------------------------------------------
         TARJETAS Y PANELES
        ---------------------------------------------------*/

        .card {
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .card--highlight {
            border-left: 4px solid var(--primary-color);
        }

        .card--warning {
            border-left: 4px solid var(--warning-color);
        }

        .card__header {
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card__header h4 {
            margin: 0;
            font-size: var(--font-size-normal);
            font-weight: 600;
        }

        .card__body {
            padding: var(--spacing-md);
        }

        .card__footer {
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-top: 1px solid var(--border-color);
        }

        .metric {
            text-align: center;
            margin-bottom: var(--spacing-sm);
        }

        .metric__value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            line-height: 1;
        }

        .metric__label {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-xs) 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        /*---------------------------------------------------
         PESTAÑAS
        ---------------------------------------------------*/

        .tabs {
            margin: var(--spacing-md) 0;
        }

        .tabs__nav {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: var(--spacing-md);
        }

        .tabs__tab {
            background: none;
            border: none;
            padding: var(--spacing-md) var(--spacing-lg);
            cursor: pointer;
            font-size: var(--font-size-normal);
            color: var(--secondary-color);
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .tabs__tab:hover {
            color: var(--primary-color);
            background-color: var(--bg-light);
        }

        .tabs__tab--active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 600;
        }

        .tabs__content {
            min-height: 200px;
        }

        .tabs__panel {
            display: none;
        }

        .tabs__panel--active {
            display: block;
        }

        /*---------------------------------------------------
         MODALES
        ---------------------------------------------------*/

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal__backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal__container {
            background-color: var(--bg-white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            z-index: 1;
        }

        .modal__header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal__header h3 {
            margin: 0;
            font-size: var(--font-size-large);
        }

        .modal__close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--secondary-color);
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal__close:hover {
            color: var(--danger-color);
        }

        .modal__body {
            padding: var(--spacing-lg);
        }

        .modal__footer {
            padding: var(--spacing-lg);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: var(--spacing-sm);
        }

        /*---------------------------------------------------
         PANEL DE FILTROS
        ---------------------------------------------------*/

        .filters-panel {
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            margin: var(--spacing-md) 0;
        }

        .filters-panel__header {
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filters-panel__header h4 {
            margin: 0;
            font-size: var(--font-size-normal);
            font-weight: 600;
        }

        .filters-panel__body {
            padding: var(--spacing-md);
        }

        /*---------------------------------------------------
         BREADCRUMBS
        ---------------------------------------------------*/

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) 0;
            font-size: var(--font-size-small);
        }

        .breadcrumb__link {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb__link:hover {
            color: var(--hover-primary);
            text-decoration: underline;
        }

        .breadcrumb__separator {
            color: var(--secondary-color);
            margin: 0 var(--spacing-xs);
        }

        .breadcrumb__current {
            color: var(--secondary-color);
            font-weight: 500;
        }

        /*---------------------------------------------------
         TIMELINE
        ---------------------------------------------------*/

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border-color);
        }

        .timeline__item {
            position: relative;
            margin-bottom: var(--spacing-lg);
        }

        .timeline__item:last-child {
            margin-bottom: 0;
        }

        .timeline__marker {
            position: absolute;
            left: -22px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--bg-white);
            z-index: 1;
        }

        .timeline__marker--primary {
            background-color: var(--primary-color);
        }

        .timeline__marker--success {
            background-color: var(--success-color);
        }

        .timeline__marker--warning {
            background-color: var(--warning-color);
        }

        .timeline__marker--error {
            background-color: var(--danger-color);
        }

        .timeline__content {
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }

        .timeline__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-xs);
        }

        .timeline__date {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
        }

        .timeline__content p {
            margin: var(--spacing-xs) 0;
            color: #666;
        }

        .table-container {
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            margin: var(--spacing-md) 0;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-size-normal);
            background-color: var(--bg-white);
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .data-table th {
            background-color: var(--bg-light);
            font-weight: 600;
            color: #333;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .data-table tr:hover {
            background-color: #f8f9fa;
        }

        .data-table tr:last-child td {
            border-bottom: none;
        }

        .row-highlighted {
            background-color: #e3f2fd !important;
        }

        /* Tabla ordenable */
        .data-table--sortable th.sortable {
            cursor: pointer;
            user-select: none;
            position: relative;
        }

        .data-table--sortable th.sortable:hover {
            background-color: #e9ecef;
        }

        .sort-icon {
            margin-left: 6px;
            opacity: 0.5;
            font-size: 12px;
        }

        .sort-icon--asc,
        .sort-icon--desc {
            opacity: 1;
            color: var(--primary-color);
        }

        /* Controles de tabla */
        .table-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-md);
            gap: var(--spacing-md);
        }

        .table-controls__left,
        .table-controls__right {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .table-controls__select {
            width: auto;
            min-width: 120px;
        }

        .table-controls__search {
            width: 250px;
        }

        /* Paginación */
        .table-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-top: 1px solid var(--border-color);
        }

        .table-pagination__info {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
        }

        .table-pagination__controls {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        /* Acciones masivas */
        .bulk-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-sm) var(--spacing-md);
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: var(--border-radius);
            margin-top: var(--spacing-md);
        }

        .bulk-actions__info {
            font-size: var(--font-size-small);
            font-weight: 500;
        }

        .bulk-actions__buttons {
            display: flex;
            gap: var(--spacing-sm);
        }

        /* Botones de acción en tabla */
        .action-buttons {
            display: flex;
            gap: 4px;
        }

        .action-buttons .btn {
            padding: 4px 8px;
            min-width: auto;
        }

        /* Alineaciones de texto */
        .text-right {
            text-align: right;
        }

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

        /*---------------------------------------------------
         TARJETAS Y PANELES
        ---------------------------------------------------*/

        .card {
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .card--highlight {
            border-left: 4px solid var(--primary-color);
        }

        .card--warning {
            border-left: 4px solid var(--warning-color);
        }

        .card__header {
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card__header h4 {
            margin: 0;
            font-size: var(--font-size-normal);
            font-weight: 600;
        }

        .card__body {
            padding: var(--spacing-md);
        }

        .card__footer {
            padding: var(--spacing-md);
            background-color: var(--bg-light);
            border-top: 1px solid var(--border-color);
        }

        /* Métricas en tarjetas */
        .metric {
            text-align: center;
            margin-bottom: var(--spacing-sm);
        }

        .metric__value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            line-height: 1;
        }

        .metric__label {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Lista de elementos en tarjetas */
        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-xs) 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        /*---------------------------------------------------
         PESTAÑAS
        ---------------------------------------------------*/

        .tabs {
            margin: var(--spacing-md) 0;
        }

        .tabs__nav {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: var(--spacing-md);
        }

        .tabs__tab {
            background: none;
            border: none;
            padding: var(--spacing-md) var(--spacing-lg);
            cursor: pointer;
            font-size: var(--font-size-normal);
            color: var(--secondary-color);
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .tabs__tab:hover {
            color: var(--primary-color);
            background-color: var(--bg-light);
        }

        .tabs__tab--active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 600;
        }

        .tabs__content {
            min-height: 200px;
        }

        .tabs__panel {
            display: none;
        }

        .tabs__panel--active {
            display: block;
        }

        /*---------------------------------------------------
         MODALES
        ---------------------------------------------------*/

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal__backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal__container {
            background-color: var(--bg-white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            z-index: 1;
        }

        .modal__header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal__header h3 {
            margin: 0;
            font-size: var(--font-size-large);
        }

        .modal__close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--secondary-color);
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal__close:hover {
            color: var(--danger-color);
        }

        .modal__body {
            padding: var(--spacing-lg);
        }

        .modal__footer {
            padding: var(--spacing-lg);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: var(--spacing-sm);
        }

        /*---------------------------------------------------
         PANEL DE FILTROS
        ---------------------------------------------------*/

        .filters-panel {
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            margin: var(--spacing-md) 0;
        }

        .filters-panel__header {
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filters-panel__header h4 {
            margin: 0;
            font-size: var(--font-size-normal);
            font-weight: 600;
        }

        .filters-panel__body {
            padding: var(--spacing-md);
        }

        /*---------------------------------------------------
         BREADCRUMBS
        ---------------------------------------------------*/

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) 0;
            font-size: var(--font-size-small);
        }

        .breadcrumb__link {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb__link:hover {
            color: var(--hover-primary);
            text-decoration: underline;
        }

        .breadcrumb__separator {
            color: var(--secondary-color);
            margin: 0 var(--spacing-xs);
        }

        .breadcrumb__current {
            color: var(--secondary-color);
            font-weight: 500;
        }

        /*---------------------------------------------------
         TIMELINE
        ---------------------------------------------------*/

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border-color);
        }

        .timeline__item {
            position: relative;
            margin-bottom: var(--spacing-lg);
        }

        .timeline__item:last-child {
            margin-bottom: 0;
        }

        .timeline__marker {
            position: absolute;
            left: -22px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--bg-white);
            z-index: 1;
        }

        .timeline__marker--primary {
            background-color: var(--primary-color);
        }

        .timeline__marker--success {
            background-color: var(--success-color);
        }

        .timeline__marker--warning {
            background-color: var(--warning-color);
        }

        .timeline__marker--error {
            background-color: var(--danger-color);
        }

        .timeline__content {
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: var(--spacing-md);
            box-shadow: var(--shadow-sm);
        }

        .timeline__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-xs);
        }

        .timeline__date {
            font-size: var(--font-size-small);
            color: var(--secondary-color);
        }

        .timeline__content p {
            margin: var(--spacing-xs) 0;
            color: #666;
        }

        /*---------------------------------------------------
         ELEMENTOS ADICIONALES
        ---------------------------------------------------*/

        /* Loading states para elementos */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .skeleton--text {
            height: 16px;
            border-radius: 4px;
            margin: 4px 0;
        }

        .skeleton--button {
            height: 36px;
            border-radius: var(--border-radius-sm);
            width: 100px;
        }

        /* Empty states */
        .empty-state {
            text-align: center;
            padding: var(--spacing-xl) var(--spacing-md);
            color: var(--secondary-color);
        }

        .empty-state__icon {
            font-size: 48px;
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
        }

        .empty-state__title {
            font-size: var(--font-size-large);
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
            color: #333;
        }

        .empty-state__description {
            margin-bottom: var(--spacing-lg);
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Tooltips mejorados */
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip__content {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 8px;
            border-radius: 4px;
            position: absolute;
            z-index: 1000;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: var(--font-size-small);
        }

        .tooltip__content::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }

        .tooltip:hover .tooltip__content {
            visibility: visible;
            opacity: 1;
        }

        /* Dropdowns */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown__toggle {
            background: none;
            border: 1px solid var(--border-color);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .dropdown__menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            box-shadow: var(--shadow-md);
            min-width: 200px;
            z-index: 100;
            display: none;
        }

        .dropdown__menu--show {
            display: block;
        }

        .dropdown__item {
            padding: var(--spacing-sm) var(--spacing-md);
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
        }

        .dropdown__item:last-child {
            border-bottom: none;
        }

        .dropdown__item:hover {
            background-color: var(--bg-light);
        }

        /*---------------------------------------------------
         UTILIDADES
        ---------------------------------------------------*/

        .text-center { text-align: center; }
        .text-right { text-align: right; }
        .mb-0 { margin-bottom: 0; }
        .mb-sm { margin-bottom: var(--spacing-sm); }
        .mb-md { margin-bottom: var(--spacing-md); }
        .mb-lg { margin-bottom: var(--spacing-lg); }

        /*---------------------------------------------------
         RESPONSIVE
        ---------------------------------------------------*/

        /*---------------------------------------------------
         RESPONSIVE DESIGN - PANTALLAS MENORES A 1000PX
        ---------------------------------------------------*/

        @media (max-width: 1000px) {
            
            /* Ajustes generales de espaciado */
            body {
                padding: var(--spacing-sm);
            }

            /* Contenedores principales */
            .form-container, .info-container {
                padding: var(--spacing-lg);
                margin-bottom: var(--spacing-md);
            }

            .section-FormGral {
                padding: var(--spacing-md);
                margin: var(--spacing-md) 0;
            }

            /* Títulos responsivos */
            .form-title {
                font-size: var(--font-size-large);
                margin-bottom: 1rem;
                padding-bottom: 0.4em;
            }

            .section-title {
                font-size: 1rem;
                margin: var(--spacing-md) 0 var(--spacing-sm) 0;
            }

            .forms-container-subtitle {
                font-size: 1rem;
                margin: var(--spacing-md) 0 var(--spacing-xs) 0;
            }

            /* Distribución de campos - Todo en columna */
            .field-row {
                flex-direction: column;
                gap: var(--spacing-md);
                align-items: stretch;
            }
            
            .field-group,
            .field-group--small,
            .field-group--medium,
            .field-group--large {
                flex: 1;
                width: 100%;
                max-width: none;
            }

            /* Checkboxes y radios se mantienen en columna */
            .checkbox-group--inline,
            .radio-group--inline {
                flex-direction: column;
                gap: var(--spacing-sm);
            }

            /* Barra de acciones - Se apila verticalmente */
            .action-bar {
                flex-direction: column;
                align-items: stretch;
                gap: var(--spacing-sm);
                padding: var(--spacing-md);
            }

            .action-bar__label {
                white-space: normal;
                margin-bottom: var(--spacing-xs);
            }

            .action-bar__input {
                max-width: none;
                flex: none;
            }

            .action-bar__spacer {
                display: none;
            }

            /* Contenedores de botones responsivos */
            .button-container {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: stretch;
            }

            .button-container--justified,
            .button-container--extremes {
                flex-direction: column;
                gap: var(--spacing-sm);
            }

            .button-container--center-group {
                flex-direction: column;
                align-items: center;
                gap: var(--spacing-sm);
            }

            .button-container--floating {
                flex-direction: column;
                align-items: stretch;
                gap: var(--spacing-sm);
            }

            /* Botones en móvil */
            .btn {
                width: 100%;
                text-align: center;
                padding: 12px 20px;
            }

            .btn--small {
                padding: 8px 16px;
                width: auto;
                align-self: center;
            }

            /* Grupo de botones - Se apilan */
            .button-group {
                flex-direction: column;
            }

            .button-group .btn {
                border-radius: var(--border-radius-sm);
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                width: 100%;
            }

            .button-group .btn:first-child {
                border-radius: var(--border-radius-sm);
            }

            .button-group .btn:last-child {
                border-radius: var(--border-radius-sm);
                border-bottom: none;
            }

            /* Ajustes específicos para campos */
            .field-input,
            .field-select {
                font-size: 16px; /* Previene zoom en iOS */
                padding: 12px;
            }

            .field-textarea {
                min-height: 80px;
            }

            /* Info fields en móvil */
            .info-field {
                padding: 12px;
                min-height: 42px;
            }

            /* Ajustes para las tarjetas de tipos de formularios */
            .field-row > .field-group h4 {
                font-size: var(--font-size-normal);
                margin-bottom: var(--spacing-xs);
            }

            .field-row > .field-group > div {
                padding: 12px;
                font-size: var(--font-size-small);
            }

            /* Contenedores de ejemplo en la guía */
            .form-container[style*="border"],
            .info-container[style*="border"],
            .section-FormGral[style*="border"],
            .action-bar[style*="border"] {
                position: relative;
                margin: 10px 0;
            }

            /* Labels de ejemplo en contenedores */
            .form-container[style*="border"] > div[style*="position: absolute"],
            .info-container[style*="border"] > div[style*="position: absolute"],
            .section-FormGral[style*="border"] > div[style*="position: absolute"],
            .action-bar[style*="border"] > div[style*="position: absolute"] {
                position: static;
                background: none;
                padding: 0 0 var(--spacing-xs) 0;
                font-size: var(--font-size-small);
                border-bottom: 1px solid currentColor;
                margin-bottom: var(--spacing-sm);
            }

            /* Código de estructura */
            div[style*="font-family: monospace"] {
                font-size: 12px;
                padding: 15px;
                overflow-x: auto;
            }

            /* Ajuste de ejemplos de layout */
            div[style*="background: #f9f9f9"] .field-row[style*="border"],
            div[style*="background: #f9f9f9"] .field-column[style*="border"] {
                padding: var(--spacing-xs);
            }

            div[style*="background: rgba(78, 140, 255, 0.1)"],
            div[style*="background: rgba(0, 228, 208, 0.1)"] {
                padding: var(--spacing-xs);
                margin-bottom: var(--spacing-xs);
            }

            /* Listas en las guías de buenas prácticas */
            .field-row[style*="align-items: flex-start"] {
                flex-direction: column;
            }

            .field-row[style*="align-items: flex-start"] ul {
                margin: 0;
                padding-left: 20px;
            }

            .field-row[style*="align-items: flex-start"] li {
                margin-bottom: var(--spacing-xs);
            }

            /* Tablas responsivas */
            .table-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .data-table {
                min-width: 600px;
            }

            .table-controls {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: stretch;
            }

            .table-controls__search {
                width: 100%;
            }

            .table-pagination {
                flex-direction: column;
                gap: var(--spacing-sm);
                text-align: center;
            }

            .bulk-actions {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: stretch;
            }

            .bulk-actions__buttons {
                justify-content: center;
            }

            /* Tarjetas responsivas */
            .card__header {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: flex-start;
            }

            /* Pestañas responsivas */
            .tabs__nav {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .tabs__tab {
                white-space: nowrap;
                padding: var(--spacing-sm) var(--spacing-md);
            }

            /* Modal responsivo */
            .modal__container {
                width: 95%;
                margin: var(--spacing-sm);
            }

            .modal__header,
            .modal__body,
            .modal__footer {
                padding: var(--spacing-md);
            }

            /* Filtros responsivos */
            .filters-panel__header {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: stretch;
            }

            /* Timeline responsivo */
            .timeline {
                padding-left: 20px;
            }

            .timeline::before {
                left: 10px;
            }

            .timeline__marker {
                left: 4px;
                width: 10px;
                height: 10px;
            }

            .timeline__header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-xs);
            }

            /* Breadcrumbs responsivo */
            .breadcrumb {
                flex-wrap: wrap;
            }

            /* Action buttons en tabla */
            .action-buttons {
                flex-direction: column;
                gap: 2px;
            }

            .action-buttons .btn {
                padding: 6px 8px;
                font-size: var(--font-size-small);
            }

        }

        /* Breakpoint adicional para pantallas muy pequeñas */
        @media (max-width: 480px) {
            
            body {
                padding: var(--spacing-xs);
            }

            .form-container, .info-container, .section-FormGral {
                padding: var(--spacing-md);
            }

            .form-title {
                font-size: var(--font-size-normal);
                text-align: left;
            }

            .form-title::after {
                width: 80%;
            }

            .section-title {
                font-size: var(--font-size-normal);
            }

            .btn {
                padding: 10px 16px;
                font-size: var(--font-size-small);
            }

            /* Ajustes específicos para nuevos elementos */
            .alert {
                flex-direction: column;
                gap: var(--spacing-xs);
                padding: var(--spacing-sm);
            }

            .alert__icon {
                align-self: flex-start;
            }

            /* Progress bar responsivo */
            .progress-bar {
                height: 20px;
            }

            .progress-bar__text {
                font-size: 11px;
            }

            /* Steps navigation en móvil */
            .steps-nav {
                flex-direction: column;
                gap: var(--spacing-md);
                align-items: stretch;
            }

            .steps-nav::before {
                display: none;
            }

            .step {
                flex-direction: row;
                justify-content: flex-start;
                padding: var(--spacing-sm);
                background-color: var(--bg-light);
                border-radius: var(--border-radius-sm);
            }

            .step__number {
                width: 30px;
                height: 30px;
                margin-bottom: 0;
                margin-right: var(--spacing-sm);
            }

            .step__label {
                max-width: none;
                text-align: left;
                align-self: center;
            }

            /* Accordion responsivo */
            .accordion__header {
                padding: var(--spacing-sm);
                font-size: var(--font-size-small);
            }

            .accordion__content {
                padding: var(--spacing-sm);
            }

            /* Dynamic list responsivo */
            .dynamic-list__header {
                flex-direction: column;
                gap: var(--spacing-sm);
                align-items: stretch;
            }

            .dynamic-list__item {
                padding: var(--spacing-sm);
            }

            /* Badges más pequeños */
            .badge {
                font-size: 10px;
                padding: 2px 6px;
            }

            /* Help icons ajustados */
            .help-icon {
                width: 16px;
                height: 16px;
                font-size: 10px;
            }

            /* Field messages más compactos */
            .field-message,
            .field-help {
                font-size: 11px;
            }

            /* Tablas ultra compactas */
            .data-table th,
            .data-table td {
                padding: 8px 4px;
                font-size: var(--font-size-small);
            }

            /* Métricas más pequeñas */
            .metric__value {
                font-size: 1.5rem;
            }

            /* Timeline más compacto */
            .timeline__content {
                padding: var(--spacing-sm);
            }

            /* Modales más pequeños */
            .modal__container {
                width: 100%;
                height: 100%;
                border-radius: 0;
                max-height: 100vh;
            }        

        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1 class="form-title">Sistema de Diseño para Formularios IGSA</h1>
        <p style="text-align: center; color: #666; font-size: 16px; margin-bottom: 40px;">
            Guía completa de arquitectura, contenedores y componentes para el desarrollo de formularios consistentes
        </p>
        
        <!-- SECCIÓN 0: ARQUITECTURA Y CONTENEDORES -->
        <h2 class="section-title">Arquitectura de Contenedores</h2>
        
        <!-- Tipos de Contenedores -->
        <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">1. Contenedor Principal de Formulario</h3>
        <div class="form-container" style="margin: 15px 0; border: 1px dotted var(--primary-color); position: relative;">
            <div style="position: absolute; top: -10px; left: 20px; background: white; padding: 0 10px; color: var(--primary-color); font-weight: bold;">
                .form-container
            </div>
            <p style="margin: 10px 0; color: #666;">
                <strong>Uso:</strong> Contenedor principal para formularios completos. Incluye borde decorativo, sombra y espaciado estándar.
            </p>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Ejemplo de contenido</label>
                    <input type="text" class="field-input" value="Contenido del formulario">
                </div>
            </div>
        </div>

        <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">2. Contenedor de Información (Solo Lectura)</h3>
        <div class="info-container" style="margin: 15px 0; border: 1px dotted var(--info-color); position: relative;">
            <div style="position: absolute; top: -10px; left: 20px; background: white; padding: 0 10px; color: var(--info-color); font-weight: bold;">
                .info-container
            </div>
            <p style="margin: 10px 0; color: #666;">
                <strong>Uso:</strong> Para mostrar datos de solo lectura (información del cliente, detalles de oportunidad, etc.)
            </p>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Dato de Solo Lectura</label>
                    <div class="info-field">Valor no editable</div>
                </div>
            </div>
        </div>

        <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">3. Sección de Formulario Específico</h3>
        <div class="section-FormGral" style="margin: 15px 0; border: 1px dotted var(--success-color); position: relative;">
            <div style="position: absolute; top: -10px; left: 20px; background: white; padding: 0 10px; color: var(--success-color); font-weight: bold;">
                .section-FormGral
            </div>
            <h4 class="forms-container-subtitle">Título de Sección Específica</h4>
            <p style="margin: 10px 0; color: #666;">
                <strong>Uso:</strong> Para agrupar preguntas específicas de un tipo de equipo (Plantas Eléctricas, UPS, etc.)
            </p>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Pregunta específica</label>
                    <select class="field-input field-select">
                        <option>Opción relacionada al equipo</option>
                    </select>
                </div>
            </div>
        </div>

        <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">4. Barra de Acciones</h3>
        <div class="action-bar" style="margin: 15px 0; border: 1px dotted var(--warning-color); position: relative;">
            <div style="position: absolute; top: -10px; left: 20px; background: white; padding: 0 10px; color: var(--warning-color); font-weight: bold;">
                .action-bar
            </div>
            <label class="action-bar__label">Etiqueta:</label>
            <input type="text" class="field-input action-bar__input" placeholder="Campo de búsqueda">
            <button class="btn btn--primary">Acción</button>
            <div class="action-bar__spacer"></div>
        </div>
        <p style="margin: 10px 0; color: #666;">
            <strong>Uso:</strong> Para acciones horizontales como búsquedas, filtros, o acciones principales del formulario.
        </p>

        <!-- Jerarquía de Contenedores -->
        <h2 class="section-title" style="margin-top: 40px;">Jerarquía y Estructura Recomendada</h2>
        
        <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0; font-family: monospace; font-size: 14px; line-height: 1.6;">
<pre style="margin: 0; color: #333;">
<span style="color: var(--primary-color); font-weight: bold;"><!-- Estructura Recomendada --></span>

<span style="color: var(--success-color);">&lt;main&gt;</span>
  <span style="color: var(--info-color);">&lt;div class="form-container"&gt;</span>
    <span style="color: #666;">&lt;!-- Título principal del formulario --&gt;</span>
    <span style="color: var(--secondary-color);">&lt;h1 class="form-title"&gt;</span>Nombre del Formulario<span style="color: var(--secondary-color);">&lt;/h1&gt;</span>
    
    <span style="color: #666;">&lt;!-- 1. Datos de solo lectura (si aplica) --&gt;</span>
    <span style="color: var(--info-color);">&lt;div class="info-container"&gt;</span>
      <span style="color: var(--secondary-color);">&lt;h2 class="section-title"&gt;</span>Datos de la Oportunidad<span style="color: var(--secondary-color);">&lt;/h2&gt;</span>
      <span style="color: #666;">&lt;!-- Campos de información --&gt;</span>
    <span style="color: var(--info-color);">&lt;/div&gt;</span>
    
    <span style="color: #666;">&lt;!-- 2. Acciones principales --&gt;</span>
    <span style="color: var(--warning-color);">&lt;div class="action-bar"&gt;</span>
      <span style="color: #666;">&lt;!-- Búsquedas, filtros, acciones --&gt;</span>
    <span style="color: var(--warning-color);">&lt;/div&gt;</span>
    
    <span style="color: #666;">&lt;!-- 3. Formularios específicos --&gt;</span>
    <span style="color: var(--success-color);">&lt;div class="section-FormGral"&gt;</span>
      <span style="color: var(--secondary-color);">&lt;h4 class="forms-container-subtitle"&gt;</span>Formulario Específico<span style="color: var(--secondary-color);">&lt;/h4&gt;</span>
      <span style="color: #666;">&lt;!-- Preguntas del formulario --&gt;</span>
    <span style="color: var(--success-color);">&lt;/div&gt;</span>
    
    <span style="color: #666;">&lt;!-- 4. Acciones finales --&gt;</span>
    <span style="color: var(--warning-color);">&lt;div class="action-bar"&gt;</span>
      <span style="color: #666;">&lt;!-- Guardar, enviar, cancelar --&gt;</span>
    <span style="color: var(--warning-color);">&lt;/div&gt;</span>
  <span style="color: var(--info-color);">&lt;/div&gt;</span>
<span style="color: var(--success-color);">&lt;/main&gt;</span>
</pre>
        </div>

        <!-- Tipos de Formularios -->
        <h2 class="section-title" style="margin-top: 40px;">Tipos de Formularios Según su Propósito</h2>
        
        <div class="field-row">
            <div class="field-group">
                <h4 style="color: var(--primary-color); margin-bottom: 10px;">📝 Formulario de Captura</h4>
                <div style="padding: 15px; background: #e3f2fd; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Nuevos registros, solicitudes<br>
                    <strong>Características:</strong> Muchos campos editables, validaciones estrictas<br>
                    <strong>Ejemplo:</strong> Solicitud de cotización nueva
                </div>
            </div>
            <div class="field-group">
                <h4 style="color: var(--success-color); margin-bottom: 10px;">🔍 Formulario de Consulta</h4>
                <div style="padding: 15px; background: #e8f5e8; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Búsquedas, filtros<br>
                    <strong>Características:</strong> Pocos campos, resultados dinámicos<br>
                    <strong>Ejemplo:</strong> Búsqueda de oportunidades
                </div>
            </div>
            <div class="field-group">
                <h4 style="color: var(--warning-color); margin-bottom: 10px;">✏️ Formulario de Edición</h4>
                <div style="padding: 15px; background: #fff8e1; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Modificar datos existentes<br>
                    <strong>Características:</strong> Datos precargados, validaciones parciales<br>
                    <strong>Ejemplo:</strong> Editar cotización existente
                </div>
            </div>
        </div>

        <div class="field-row">
            <div class="field-group">
                <h4 style="color: var(--info-color); margin-bottom: 10px;">👀 Formulario de Visualización</h4>
                <div style="padding: 15px; background: #e0f2f1; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Solo mostrar información<br>
                    <strong>Características:</strong> Campos de solo lectura, sin acciones de guardado<br>
                    <strong>Ejemplo:</strong> Ver detalles de cliente
                </div>
            </div>
            <div class="field-group">
                <h4 style="color: var(--secondary-color); margin-bottom: 10px;">🔧 Formulario Multipaso</h4>
                <div style="padding: 15px; background: #f3e5f5; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Procesos complejos paso a paso<br>
                    <strong>Características:</strong> Múltiples secciones, navegación entre pasos<br>
                    <strong>Ejemplo:</strong> Configurador de equipos
                </div>
            </div>
            <div class="field-group">
                <h4 style="color: var(--danger-color); margin-bottom: 10px;">⚡ Formulario de Acción Rápida</h4>
                <div style="padding: 15px; background: #ffebee; border-radius: 6px; font-size: 14px;">
                    <strong>Uso:</strong> Acciones inmediatas<br>
                    <strong>Características:</strong> Mínimos campos, acción directa<br>
                    <strong>Ejemplo:</strong> Aprobar/rechazar solicitud
                </div>
            </div>
        </div>

        <!-- Layouts de Distribución -->
        <h2 class="section-title" style="margin-top: 40px;">Layouts de Distribución de Campos</h2>
        
        <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Distribución Horizontal (field-row)</h3>
        <div style="background: #f9f9f9; padding: 15px; border-radius: 6px; margin: 15px 0;">
            <div class="field-row" style="border: 1px dashed #ccc; padding: 10px;">
                <div class="field-group" style="background: rgba(78, 140, 255, 0.1); border: 1px solid var(--primary-color); border-radius: 4px; padding: 10px;">
                    <small style="color: var(--primary-color); font-weight: bold;">.field-group</small>
                    <input type="text" class="field-input" placeholder="Campo 1">
                </div>
                <div class="field-group" style="background: rgba(78, 140, 255, 0.1); border: 1px solid var(--primary-color); border-radius: 4px; padding: 10px;">
                    <small style="color: var(--primary-color); font-weight: bold;">.field-group</small>
                    <input type="text" class="field-input" placeholder="Campo 2">
                </div>
                <div class="field-group" style="background: rgba(78, 140, 255, 0.1); border: 1px solid var(--primary-color); border-radius: 4px; padding: 10px;">
                    <small style="color: var(--primary-color); font-weight: bold;">.field-group</small>
                    <input type="text" class="field-input" placeholder="Campo 3">
                </div>
            </div>
            <p style="margin: 10px 0 0 0; color: #666; font-size: 14px;">
                <strong>Uso:</strong> Para campos relacionados que deben verse juntos (nombre, apellido, teléfono)
            </p>
        </div>

        <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Distribución Vertical (field-column)</h3>
        <div style="background: #f9f9f9; padding: 15px; border-radius: 6px; margin: 15px 0;">
            <div class="field-column" style="border: 1px dashed #ccc; padding: 10px; max-width: 300px;">
                <div class="field-group" style="background: rgba(0, 228, 208, 0.1); border: 1px solid var(--success-color); border-radius: 4px; padding: 10px;">
                    <small style="color: var(--success-color); font-weight: bold;">.field-group</small>
                    <input type="text" class="field-input" placeholder="Campo 1">
                </div>
                <div class="field-group" style="background: rgba(0, 228, 208, 0.1); border: 1px solid var(--success-color); border-radius: 4px; padding: 10px;">
                    <small style="color: var(--success-color); font-weight: bold;">.field-group</small>
                    <input type="text" class="field-input" placeholder="Campo 2">
                </div>
            </div>
            <p style="margin: 10px 0 0 0; color: #666; font-size: 14px;">
                <strong>Uso:</strong> Para formularios en espacios reducidos o listas de opciones largas
            </p>
        </div>

        <!-- Guía de Buenas Prácticas -->
        <h2 class="section-title" style="margin-top: 40px;">Guía de Buenas Prácticas</h2>
        
        <div class="field-row" style="align-items: flex-start;">
            <div class="field-group">
                <h4 style="color: #2e7d32; margin-bottom: 15px;">✅ Hacer</h4>
                <ul style="color: #666; font-size: 14px; line-height: 1.6;">
                    <li>Usar <code>.info-field</code> para datos no editables</li>
                    <li>Agrupar campos relacionados en <code>.field-row</code></li>
                    <li>Marcar campos obligatorios con <code>.field-label--required</code></li>
                    <li>Usar <code>.section-FormGral</code> para cada tipo de equipo</li>
                    <li>Colocar acciones principales en <code>.action-bar</code></li>
                    <li>Mantener máximo 3 campos por fila en desktop</li>
                    <li>Usar estados de validación (<code>--error</code>, <code>--success</code>)</li>
                </ul>
            </div>
            <div class="field-group">
                <h4 style="color: #d32f2f; margin-bottom: 15px;">❌ Evitar</h4>
                <ul style="color: #666; font-size: 14px; line-height: 1.6;">
                    <li>Usar <code>input disabled</code> para mostrar datos</li>
                    <li>Mezclar campos editables y no editables sin distinción</li>
                    <li>Más de 4 campos en una sola fila</li>
                    <li>Botones sin jerarquía clara (primario/secundario)</li>
                    <li>Formularios sin títulos de sección</li>
                    <li>Labels muy largos que rompan el diseño</li>
                    <li>Campos obligatorios sin indicación visual</li>
                </ul>
            </div>
        </div>

        <!-- SECCIÓN 5: ELEMENTOS ADICIONALES IMPORTANTES -->
        <div class="form-container">
            <h1 class="form-title">Elementos Complementarios del Sistema</h1>
            
            <!-- Mensajes y Alertas -->
            <h2 class="section-title">Mensajes de Sistema y Alertas</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Mensajes de Validación</h3>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Campo con Error</label>
                    <input type="text" class="field-input field-input--error" value="Valor inválido">
                    <div class="field-message field-message--error">Este campo es obligatorio</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Campo con Advertencia</label>
                    <input type="text" class="field-input field-input--warning" value="Valor cuestionable">
                    <div class="field-message field-message--warning">Verifique este valor</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Campo Válido</label>
                    <input type="text" class="field-input field-input--success" value="Valor correcto">
                    <div class="field-message field-message--success">Campo validado correctamente</div>
                </div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Alertas de Sistema</h3>
            <div class="alert alert--info">
                <div class="alert__icon">ℹ️</div>
                <div class="alert__content">
                    <strong>Información:</strong> Los datos se guardan automáticamente cada 30 segundos.
                </div>
            </div>

            <div class="alert alert--success">
                <div class="alert__icon">✅</div>
                <div class="alert__content">
                    <strong>Éxito:</strong> La cotización se ha enviado correctamente al departamento de ingeniería.
                </div>
            </div>

            <div class="alert alert--warning">
                <div class="alert__icon">⚠️</div>
                <div class="alert__content">
                    <strong>Advertencia:</strong> Algunos campos opcionales están vacíos. ¿Desea continuar?
                </div>
            </div>

            <div class="alert alert--error">
                <div class="alert__icon">❌</div>
                <div class="alert__content">
                    <strong>Error:</strong> No se pudo conectar con el servidor. Verifique su conexión a internet.
                </div>
            </div>

            <!-- Estados de Carga -->
            <h2 class="section-title" style="margin-top: 40px;">Estados de Carga y Progreso</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Botones con Estados de Carga</h3>
            <div class="field-row" style="justify-content: flex-start; gap: 15px;">
                <button class="btn btn--primary">Estado Normal</button>
                <button class="btn btn--primary btn--loading">
                    <span class="btn__spinner"></span>
                    Cargando...
                </button>
                <button class="btn btn--primary" disabled>Estado Deshabilitado</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Indicadores de Progreso</h3>
            <div class="field-row">
                <div class="field-group field-group--full">
                    <label class="field-label">Progreso de Formulario</label>
                    <div class="progress-bar">
                        <div class="progress-bar__fill" style="width: 65%;"></div>
                        <div class="progress-bar__text">65% Completado</div>
                    </div>
                </div>
            </div>

            <!-- Elementos de Ayuda -->
            <h2 class="section-title" style="margin-top: 40px;">Elementos de Ayuda y Contexto</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Tooltips y Ayuda Contextual</h3>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">
                        Potencia Requerida
                        <span class="help-icon" title="La potencia se mide en kW. Para calcular, sume todas las cargas eléctricas del sitio.">?</span>
                    </label>
                    <input type="number" class="field-input" placeholder="100">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo con Ayuda</label>
                    <input type="text" class="field-input">
                    <div class="field-help">Ingrese el código tal como aparece en su documento de identidad</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Campo Opcional</label>
                    <input type="text" class="field-input">
                    <span class="field-optional">(Opcional)</span>
                </div>
            </div>

            <!-- Separadores y Divisores -->
            <h2 class="section-title" style="margin-top: 40px;">Separadores y Organización</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Separadores Visuales</h3>
            <div class="field-row">
                <div class="field-group">
                    <input type="text" class="field-input" placeholder="Antes del separador">
                </div>
            </div>

            <div class="divider divider--with-text">
                <span>Información Adicional</span>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <input type="text" class="field-input" placeholder="Después del separador">
                </div>
            </div>

            <div class="divider"></div>

            <!-- Etiquetas y Badges -->
            <h2 class="section-title" style="margin-top: 40px;">Etiquetas y Estados</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Badges de Estado</h3>
            <div class="field-row" style="justify-content: flex-start; gap: 15px; align-items: center;">
                <span class="badge badge--primary">Nuevo</span>
                <span class="badge badge--success">Aprobado</span>
                <span class="badge badge--warning">Pendiente</span>
                <span class="badge badge--error">Rechazado</span>
                <span class="badge badge--secondary">Borrador</span>
            </div>

            <!-- Navegación de Pasos -->
            <h2 class="section-title" style="margin-top: 40px;">Navegación de Formularios Multipaso</h2>
            
            <div class="steps-nav">
                <div class="step step--completed">
                    <div class="step__number">1</div>
                    <div class="step__label">Datos Básicos</div>
                </div>
                <div class="step step--completed">
                    <div class="step__number">2</div>
                    <div class="step__label">Selección de Equipos</div>
                </div>
                <div class="step step--active">
                    <div class="step__number">3</div>
                    <div class="step__label">Especificaciones</div>
                </div>
                <div class="step step--pending">
                    <div class="step__number">4</div>
                    <div class="step__label">Revisión</div>
                </div>
            </div>

            <!-- Acordeones/Collapsibles -->
            <h2 class="section-title" style="margin-top: 40px;">Secciones Colapsables</h2>
            
            <div class="accordion">
                <div class="accordion__item">
                    <button class="accordion__header accordion__header--active">
                        <span>Especificaciones Técnicas</span>
                        <span class="accordion__icon">−</span>
                    </button>
                    <div class="accordion__content accordion__content--open">
                        <div class="field-row">
                            <div class="field-group">
                                <label class="field-label">Voltaje</label>
                                <select class="field-input field-select">
                                    <option>220V</option>
                                    <option>440V</option>
                                </select>
                            </div>
                            <div class="field-group">
                                <label class="field-label">Frecuencia</label>
                                <input type="text" class="field-input" value="60 Hz">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="accordion__item">
                    <button class="accordion__header">
                        <span>Opciones Adicionales</span>
                        <span class="accordion__icon">+</span>
                    </button>
                    <div class="accordion__content">
                        <p>Contenido colapsado...</p>
                    </div>
                </div>
            </div>

            <!-- Listas de Elementos Dinámicos -->
            <h2 class="section-title" style="margin-top: 40px;">Listas Dinámicas</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Lista de Equipos (Agregar/Quitar)</h3>
            <div class="dynamic-list">
                <div class="dynamic-list__header">
                    <h4>Equipos Solicitados</h4>
                    <button class="btn btn--primary btn--small">+ Agregar Equipo</button>
                </div>
                
                <div class="dynamic-list__item">
                    <div class="field-row">
                        <div class="field-group field-group--small">
                            <input type="number" class="field-input" value="2" min="1">
                        </div>
                        <div class="field-group">
                            <select class="field-input field-select">
                                <option>Planta Eléctrica 100kW</option>
                            </select>
                        </div>
                        <div class="field-group field-group--small">
                            <button class="btn btn--secondary btn--small">Quitar</button>
                        </div>
                    </div>
                </div>
                
                <div class="dynamic-list__item">
                    <div class="field-row">
                        <div class="field-group field-group--small">
                            <input type="number" class="field-input" value="1" min="1">
                        </div>
                        <div class="field-group">
                            <select class="field-input field-select">
                                <option>UPS 3000VA</option>
                            </select>
                        </div>
                        <div class="field-group field-group--small">
                            <button class="btn btn--secondary btn--small">Quitar</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ejemplo final con todos los elementos -->
            <h2 class="section-title" style="margin-top: 40px;">Ejemplo Completo Integrado</h2>
            
            <div class="alert alert--info">
                <div class="alert__icon">ℹ️</div>
                <div class="alert__content">
                    Complete todos los campos marcados como obligatorios antes de continuar.
                </div>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <label class="field-label field-label--required">
                        Proyecto
                        <span class="help-icon" title="Nombre único del proyecto para identificación interna">?</span>
                    </label>
                    <input type="text" class="field-input field-input--success" value="Proyecto Hospital Central">
                    <div class="field-message field-message--success">Nombre válido y disponible</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Estado</label>
                    <div class="info-field">
                        En Proceso <span class="badge badge--warning">Pendiente</span>
                    </div>
                </div>
            </div>

            <div class="progress-bar" style="margin: 20px 0;">
                <div class="progress-bar__fill" style="width: 85%;"></div>
                <div class="progress-bar__text">85% Completado</div>
            </div>

            <div class="button-container button-container--justified">
                <button class="btn btn--secondary">Guardar Borrador</button>
                <button class="btn btn--primary btn--loading">
                    <span class="btn__spinner"></span>
                    Procesando...
                </button>
            </div>
        </div>

        <!-- SECCIÓN 6: TABLAS Y LISTADOS -->
        <div class="form-container">
            <h1 class="form-title">Tablas y Listados de Datos</h1>
            
            <!-- Tabla Básica -->
            <h2 class="section-title">Tabla Básica</h2>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Cliente</th>
                            <th>Equipo</th>
                            <th>Estado</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>COT-001</td>
                            <td>Grupo Empresarial ABC</td>
                            <td>Planta Eléctrica 150kW</td>
                            <td><span class="badge badge--success">Aprobada</span></td>
                            <td>15/06/2025</td>
                            <td>
                                <button class="btn btn--primary btn--small">Ver</button>
                                <button class="btn btn--secondary btn--small">Editar</button>
                            </td>
                        </tr>
                        <tr>
                            <td>COT-002</td>
                            <td>Hospital San José</td>
                            <td>UPS 5000VA + Baterías</td>
                            <td><span class="badge badge--warning">Pendiente</span></td>
                            <td>14/06/2025</td>
                            <td>
                                <button class="btn btn--primary btn--small">Ver</button>
                                <button class="btn btn--secondary btn--small">Editar</button>
                            </td>
                        </tr>
                        <tr class="row-highlighted">
                            <td>COT-003</td>
                            <td>Centro Comercial Norte</td>
                            <td>Aires Acondicionados (3 unidades)</td>
                            <td><span class="badge badge--primary">Nueva</span></td>
                            <td>13/06/2025</td>
                            <td>
                                <button class="btn btn--primary btn--small">Ver</button>
                                <button class="btn btn--secondary btn--small">Editar</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Tabla con DataTable Features -->
            <h2 class="section-title" style="margin-top: 40px;">Tabla con Funcionalidades Avanzadas</h2>
            
            <!-- Controles de tabla -->
            <div class="table-controls">
                <div class="table-controls__left">
                    <label class="field-label">Mostrar:</label>
                    <select class="field-input field-select table-controls__select">
                        <option value="10">10 registros</option>
                        <option value="25" selected>25 registros</option>
                        <option value="50">50 registros</option>
                        <option value="100">100 registros</option>
                    </select>
                </div>
                <div class="table-controls__right">
                    <label class="field-label">Buscar:</label>
                    <input type="text" class="field-input table-controls__search" placeholder="Filtrar registros...">
                </div>
            </div>

            <div class="table-container">
                <table class="data-table data-table--sortable">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="checkbox-input">
                            </th>
                            <th class="sortable">
                                ID Cotización
                                <span class="sort-icon">↕️</span>
                            </th>
                            <th class="sortable">
                                Cliente
                                <span class="sort-icon">↕️</span>
                            </th>
                            <th class="sortable">
                                Fecha Creación
                                <span class="sort-icon sort-icon--desc">⬇️</span>
                            </th>
                            <th>Estado</th>
                            <th>Total</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" class="checkbox-input"></td>
                            <td>COT-2025-001</td>
                            <td>Industrias del Norte S.A.</td>
                            <td>15/06/2025</td>
                            <td><span class="badge badge--success">Enviada</span></td>
                            <td class="text-right">$125,000.00</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn--primary btn--small" title="Ver detalles">👁️</button>
                                    <button class="btn btn--secondary btn--small" title="Editar">✏️</button>
                                    <button class="btn btn--warning btn--small" title="Duplicar">📋</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="checkbox-input"></td>
                            <td>COT-2025-002</td>
                            <td>Clínica Especializada</td>
                            <td>14/06/2025</td>
                            <td><span class="badge badge--warning">En Revisión</span></td>
                            <td class="text-right">$89,500.00</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn--primary btn--small" title="Ver detalles">👁️</button>
                                    <button class="btn btn--secondary btn--small" title="Editar">✏️</button>
                                    <button class="btn btn--warning btn--small" title="Duplicar">📋</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="checkbox-input"></td>
                            <td>COT-2025-003</td>
                            <td>Universidad Tecnológica</td>
                            <td>13/06/2025</td>
                            <td><span class="badge badge--error">Rechazada</span></td>
                            <td class="text-right">$200,000.00</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn--primary btn--small" title="Ver detalles">👁️</button>
                                    <button class="btn btn--secondary btn--small" title="Editar">✏️</button>
                                    <button class="btn btn--warning btn--small" title="Duplicar">📋</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="checkbox-input"></td>
                            <td>COT-2025-004</td>
                            <td>Grupo Hotelero Premium</td>
                            <td>12/06/2025</td>
                            <td><span class="badge badge--primary">Borrador</span></td>
                            <td class="text-right">$156,750.00</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn--primary btn--small" title="Ver detalles">👁️</button>
                                    <button class="btn btn--secondary btn--small" title="Editar">✏️</button>
                                    <button class="btn btn--warning btn--small" title="Duplicar">📋</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            <div class="table-pagination">
                <div class="table-pagination__info">
                    Mostrando 1 a 4 de 47 registros
                </div>
                <div class="table-pagination__controls">
                    <button class="btn btn--secondary btn--small" disabled>Anterior</button>
                    <button class="btn btn--primary btn--small">1</button>
                    <button class="btn btn--secondary btn--small">2</button>
                    <button class="btn btn--secondary btn--small">3</button>
                    <span>...</span>
                    <button class="btn btn--secondary btn--small">12</button>
                    <button class="btn btn--secondary btn--small">Siguiente</button>
                </div>
            </div>

            <!-- Acciones masivas -->
            <div class="bulk-actions">
                <div class="bulk-actions__info">
                    <span id="selected-count">0</span> elementos seleccionados
                </div>
                <div class="bulk-actions__buttons">
                    <button class="btn btn--warning btn--small">Exportar Seleccionados</button>
                    <button class="btn btn--secondary btn--small">Marcar como Leídos</button>
                    <button class="btn btn--error btn--small">Eliminar Seleccionados</button>
                </div>
            </div>
        </div>

        <!-- SECCIÓN 7: ELEMENTOS ADICIONALES DE INTERFAZ -->
        <div class="form-container">
            <h1 class="form-title">Elementos Adicionales de Interfaz</h1>
            
            <!-- Cards/Tarjetas -->
            <h2 class="section-title">Tarjetas y Paneles</h2>
            <div class="field-row">
                <div class="field-group">
                    <div class="card">
                        <div class="card__header">
                            <h4>Cotizaciones del Mes</h4>
                            <span class="badge badge--primary">Nuevo</span>
                        </div>
                        <div class="card__body">
                            <div class="metric">
                                <div class="metric__value">47</div>
                                <div class="metric__label">Total</div>
                            </div>
                            <div class="metric">
                                <div class="metric__value">12</div>
                                <div class="metric__label">Aprobadas</div>
                            </div>
                        </div>
                        <div class="card__footer">
                            <button class="btn btn--primary btn--small">Ver Detalle</button>
                        </div>
                    </div>
                </div>
                <div class="field-group">
                    <div class="card card--highlight">
                        <div class="card__header">
                            <h4>Equipos Más Solicitados</h4>
                        </div>
                        <div class="card__body">
                            <div class="list-item">
                                <span>Plantas Eléctricas</span>
                                <span class="badge badge--success">28</span>
                            </div>
                            <div class="list-item">
                                <span>UPS</span>
                                <span class="badge badge--warning">15</span>
                            </div>
                            <div class="list-item">
                                <span>Aires Acondicionados</span>
                                <span class="badge badge--secondary">8</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field-group">
                    <div class="card card--warning">
                        <div class="card__header">
                            <h4>⚠️ Atención Requerida</h4>
                        </div>
                        <div class="card__body">
                            <p>5 cotizaciones pendientes de revisión desde hace más de 3 días.</p>
                        </div>
                        <div class="card__footer">
                            <button class="btn btn--warning btn--small">Revisar Ahora</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabs/Pestañas -->
            <h2 class="section-title" style="margin-top: 40px;">Pestañas de Navegación</h2>
            <div class="tabs">
                <div class="tabs__nav">
                    <button class="tabs__tab tabs__tab--active">Información General</button>
                    <button class="tabs__tab">Especificaciones Técnicas</button>
                    <button class="tabs__tab">Documentos</button>
                    <button class="tabs__tab">Historial</button>
                </div>
                <div class="tabs__content">
                    <div class="tabs__panel tabs__panel--active">
                        <div class="field-row">
                            <div class="field-group">
                                <label class="field-label">Nombre del Proyecto</label>
                                <input type="text" class="field-input" value="Instalación Hospital Central">
                            </div>
                            <div class="field-group">
                                <label class="field-label">Cliente</label>
                                <div class="info-field">Hospital San José S.A.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal/Dialog -->
            <h2 class="section-title" style="margin-top: 40px;">Ventanas Modales</h2>
            <button class="btn btn--primary" onclick="document.getElementById('modal-example').style.display='flex'">
                Abrir Modal de Ejemplo
            </button>

            <div class="modal" id="modal-example" style="display: none;">
                <div class="modal__backdrop"></div>
                <div class="modal__container">
                    <div class="modal__header">
                        <h3>Confirmar Eliminación</h3>
                        <button class="modal__close" onclick="document.getElementById('modal-example').style.display='none'">×</button>
                    </div>
                    <div class="modal__body">
                        <p>¿Está seguro que desea eliminar la cotización <strong>COT-2025-001</strong>?</p>
                        <div class="alert alert--warning">
                            <div class="alert__icon">⚠️</div>
                            <div class="alert__content">Esta acción no se puede deshacer.</div>
                        </div>
                    </div>
                    <div class="modal__footer">
                        <button class="btn btn--secondary" onclick="document.getElementById('modal-example').style.display='none'">
                            Cancelar
                        </button>
                        <button class="btn btn--error">Eliminar</button>
                    </div>
                </div>
            </div>

            <!-- Filtros Avanzados -->
            <h2 class="section-title" style="margin-top: 40px;">Panel de Filtros</h2>
            <div class="filters-panel">
                <div class="filters-panel__header">
                    <h4>Filtros de Búsqueda</h4>
                    <button class="btn btn--secondary btn--small">Limpiar Filtros</button>
                </div>
                <div class="filters-panel__body">
                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label">Fecha Desde</label>
                            <input type="date" class="field-input">
                        </div>
                        <div class="field-group">
                            <label class="field-label">Fecha Hasta</label>
                            <input type="date" class="field-input">
                        </div>
                        <div class="field-group">
                            <label class="field-label">Estado</label>
                            <select class="field-input field-select">
                                <option value="">Todos los estados</option>
                                <option value="borrador">Borrador</option>
                                <option value="enviada">Enviada</option>
                                <option value="aprobada">Aprobada</option>
                                <option value="rechazada">Rechazada</option>
                            </select>
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label">Cliente</label>
                            <input type="text" class="field-input" placeholder="Buscar cliente...">
                        </div>
                        <div class="field-group">
                            <label class="field-label">Tipo de Equipo</label>
                            <select class="field-input field-select">
                                <option value="">Todos los equipos</option>
                                <option value="plantas">Plantas Eléctricas</option>
                                <option value="ups">UPS</option>
                                <option value="aires">Aires Acondicionados</option>
                            </select>
                        </div>
                        <div class="field-group" style="align-self: flex-end;">
                            <button class="btn btn--primary">Aplicar Filtros</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Breadcrumbs -->
            <h2 class="section-title" style="margin-top: 40px;">Navegación por Migas de Pan</h2>
            <nav class="breadcrumb">
                <a href="#" class="breadcrumb__link">Inicio</a>
                <span class="breadcrumb__separator">></span>
                <a href="#" class="breadcrumb__link">Ventas</a>
                <span class="breadcrumb__separator">></span>
                <a href="#" class="breadcrumb__link">Cotizaciones</a>
                <span class="breadcrumb__separator">></span>
                <span class="breadcrumb__current">COT-2025-001</span>
            </nav>

            <!-- Timeline -->
            <h2 class="section-title" style="margin-top: 40px;">Línea de Tiempo</h2>
            <div class="timeline">
                <div class="timeline__item">
                    <div class="timeline__marker timeline__marker--success"></div>
                    <div class="timeline__content">
                        <div class="timeline__header">
                            <strong>Cotización Enviada</strong>
                            <span class="timeline__date">15/06/2025 - 14:30</span>
                        </div>
                        <p>La cotización fue enviada exitosamente al cliente.</p>
                        <span class="badge badge--success">María González</span>
                    </div>
                </div>
                <div class="timeline__item">
                    <div class="timeline__marker timeline__marker--primary"></div>
                    <div class="timeline__content">
                        <div class="timeline__header">
                            <strong>Cotización Aprobada</strong>
                            <span class="timeline__date">14/06/2025 - 11:15</span>
                        </div>
                        <p>La cotización fue revisada y aprobada por ingeniería.</p>
                        <span class="badge badge--primary">Carlos López</span>
                    </div>
                </div>
                <div class="timeline__item">
                    <div class="timeline__marker timeline__marker--warning"></div>
                    <div class="timeline__content">
                        <div class="timeline__header">
                            <strong>Cotización Creada</strong>
                            <span class="timeline__date">13/06/2025 - 09:45</span>
                        </div>
                        <p>Se creó la cotización inicial con los requerimientos del cliente.</p>
                        <span class="badge badge--warning">Ana Martínez</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
        <!-- SECCIÓN 1: INFORMACIÓN (SOLO LECTURA) -->
        <div class="info-container">
            <h2 class="section-title">Datos de la Oportunidad (Solo Lectura)</h2>
            
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">ID del Contacto</label>
                    <div class="info-field">CONT-001234</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Nombre del Contacto</label>
                    <div class="info-field info-field--emphasized">Juan Pérez García</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Tipo de Contacto</label>
                    <div class="info-field">Cliente Potencial</div>
                </div>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Vendedor Asignado</label>
                    <div class="info-field">María González</div>
                </div>
                <div class="field-group">
                    <label class="field-label">Ciudad</label>
                    <div class="info-field">Ciudad de México</div>
                </div>
                <div class="field-group">
                    <label class="field-label">País</label>
                    <div class="info-field">México</div>
                </div>
            </div>
        </div>

        <!-- SECCIÓN 2: SELECCIÓN DE FORMULARIOS -->
        <div class="form-container">
            <h2 class="section-title">Elección de Formularios para Cotización</h2>
            
            <!-- Barra de acciones -->
            <div class="action-bar">
                <label class="action-bar__label">Número de Oportunidad:</label>
                <input type="text" class="field-input action-bar__input" placeholder="Ingrese el número">
                <button class="btn btn--primary">Buscar</button>
                <div class="action-bar__spacer"></div>
            </div>

            <!-- Checkboxes para seleccionar tipos de formularios -->
            <div class="checkbox-group checkbox-group--inline">
                <div class="checkbox-item">
                    <input type="checkbox" id="formPlantaLuz" class="checkbox-input" value="planta_luz">
                    <label for="formPlantaLuz" class="checkbox-label">Formulario de Plantas Eléctricas</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="formAires" class="checkbox-input" value="aires">
                    <label for="formAires" class="checkbox-label">Formulario de Aires Acondicionados</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="formUPS" class="checkbox-input" value="ups">
                    <label for="formUPS" class="checkbox-label">Formulario de UPS</label>
                </div>
            </div>

            <div class="field-row" style="justify-content: center; margin-top: 20px;">
                <button class="btn btn--primary" id="btnAddForm">Aceptar</button>
            </div>
        </div>

        <!-- SECCIÓN 3: FORMULARIOS ESPECÍFICOS -->
        <div class="form-container">
            <h2 class="section-title">Sección de Formularios</h2>

            <!-- Preguntas generales (aplican a todos) -->
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">¿Se requiere visita de un técnico al sitio?</label>
                    <select class="field-input field-select">
                        <option value="no" selected>No</option>
                        <option value="si">Sí</option>
                    </select>
                </div>
                <div class="field-group field-group--small">
                    <label class="field-label field-label--required">Cantidad</label>
                    <input type="number" class="field-input" min="1" required>
                </div>
                <div class="field-group"></div>
            </div>

            <!-- FORMULARIO ESPECÍFICO 1: PLANTAS ELÉCTRICAS -->
            <div class="section-FormGral">
                <h4 class="forms-container-subtitle">Formulario de Plantas Eléctricas</h4>
                
                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">¿Qué tipo de combustible prefiere?</label>
                        <select class="field-input field-select">
                            <option value="">Seleccione una opción</option>
                            <option value="diesel">Diesel</option>
                            <option value="gas">Gas Natural</option>
                            <option value="gasolina">Gasolina</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Potencia requerida (kW)</label>
                        <input type="number" class="field-input" min="1" placeholder="Ej: 100">
                    </div>
                    <div class="field-group">
                        <label class="field-label">¿Requiere transferencia automática?</label>
                        <select class="field-input field-select">
                            <option value="no" selected>No</option>
                            <option value="si">Sí</option>
                        </select>
                    </div>
                </div>

                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">Tipo de arranque</label>
                        <select class="field-input field-select">
                            <option value="manual">Manual</option>
                            <option value="automatico" selected>Automático</option>
                            <option value="remoto">Remoto</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Tiempo de operación continua estimado</label>
                        <select class="field-input field-select">
                            <option value="1-8h">1-8 horas</option>
                            <option value="8-24h">8-24 horas</option>
                            <option value="24h+">Más de 24 horas</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">¿Instalación en área clasificada?</label>
                        <select class="field-input field-select">
                            <option value="no" selected>No</option>
                            <option value="si">Sí</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- FORMULARIO ESPECÍFICO 2: AIRES ACONDICIONADOS -->
            <div class="section-FormGral">
                <h4 class="forms-container-subtitle">Formulario de Aires Acondicionados</h4>
                
                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">Capacidad de refrigeración (BTU/h)</label>
                        <input type="number" class="field-input" min="1" placeholder="Ej: 12000">
                    </div>
                    <div class="field-group">
                        <label class="field-label">Tipo de unidad</label>
                        <select class="field-input field-select">
                            <option value="">Seleccione una opción</option>
                            <option value="split">Split</option>
                            <option value="ventana">Ventana</option>
                            <option value="central">Central</option>
                            <option value="precision">Aire de Precisión</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Voltaje requerido</label>
                        <select class="field-input field-select">
                            <option value="110v">110V</option>
                            <option value="220v" selected>220V</option>
                            <option value="440v">440V</option>
                        </select>
                    </div>
                </div>

                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">¿Requiere control de humedad?</label>
                        <select class="field-input field-select">
                            <option value="no" selected>No</option>
                            <option value="si">Sí</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Área a climatizar (m²)</label>
                        <input type="number" class="field-input" min="1" placeholder="Ej: 50">
                    </div>
                    <div class="field-group">
                        <label class="field-label">¿Requiere monitoreo remoto?</label>
                        <select class="field-input field-select">
                            <option value="no" selected>No</option>
                            <option value="si">Sí</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- FORMULARIO ESPECÍFICO 3: UPS -->
            <div class="section-FormGral">
                <h4 class="forms-container-subtitle">Formulario de UPS</h4>
                
                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">Potencia requerida (VA)</label>
                        <input type="number" class="field-input" min="1" placeholder="Ej: 3000">
                    </div>
                    <div class="field-group">
                        <label class="field-label">Tiempo de respaldo requerido</label>
                        <select class="field-input field-select">
                            <option value="">Seleccione una opción</option>
                            <option value="5-15min">5-15 minutos</option>
                            <option value="15-30min">15-30 minutos</option>
                            <option value="30-60min">30-60 minutos</option>
                            <option value="60min+">Más de 60 minutos</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Tipo de UPS</label>
                        <select class="field-input field-select">
                            <option value="">Seleccione una opción</option>
                            <option value="offline">Off-line</option>
                            <option value="interactive">Line Interactive</option>
                            <option value="online">On-line (Doble conversión)</option>
                        </select>
                    </div>
                </div>

                <div class="field-row">
                    <div class="field-group">
                        <label class="field-label">Voltaje de entrada</label>
                        <select class="field-input field-select">
                            <option value="110v">110V</option>
                            <option value="220v" selected>220V</option>
                            <option value="440v">440V</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">¿Requiere software de monitoreo?</label>
                        <select class="field-input field-select">
                            <option value="no" selected>No</option>
                            <option value="si">Sí</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="field-label">Tipo de baterías</label>
                        <select class="field-input field-select">
                            <option value="selladas">Selladas (VRLA)</option>
                            <option value="gel">Gel</option>
                            <option value="litio">Litio</option>
                        </select>
                    </div>
                </div>

                <div class="field-row">
                    <div class="field-group field-group--full">
                        <label class="field-label">Equipos críticos a proteger</label>
                        <textarea class="field-input field-textarea" placeholder="Describa los equipos que requieren protección (servidores, equipos médicos, etc.)"></textarea>
                    </div>
                </div>
            </div>

            <!-- Editar formulario y acciones finales -->
            <div class="action-bar" style="margin-top: 30px;">
                <label class="action-bar__label">Editar Formulario:</label>
                <input type="text" class="field-input action-bar__input" placeholder="ID del formulario">
                <button class="btn btn--primary">Buscar</button>
                <div class="action-bar__spacer"></div>
                <button class="btn btn--success btn--large">Solicitar Cotización</button>
            </div>
        </div>

        <!-- SECCIÓN 4: CATÁLOGO DE COMPONENTES Y EJEMPLOS -->
        <div class="form-container">
            <h1 class="form-title">Catálogo de Componentes Reutilizables</h1>
            
            <!-- Ejemplos de campos básicos -->
            <h2 class="section-title">Campos de Entrada Básicos</h2>
            
            <div class="field-row">
                <div class="field-group field-group--small">
                    <label class="field-label field-label--required">Campo Numérico</label>
                    <input type="number" class="field-input" min="1" placeholder="123" required>
                </div>
                <div class="field-group">
                    <label class="field-label field-label--required">Campo de Texto</label>
                    <input type="text" class="field-input" placeholder="Ingrese texto..." required>
                </div>
                <div class="field-group field-group--medium">
                    <label class="field-label">Campo de Fecha</label>
                    <input type="date" class="field-input">
                </div>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Campo de Email</label>
                    <input type="email" class="field-input" placeholder="ejemplo@igsa.com">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo de Teléfono</label>
                    <input type="tel" class="field-input" placeholder="+52 55 1234 5678">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo de URL</label>
                    <input type="url" class="field-input" placeholder="https://ejemplo.com">
                </div>
            </div>

            <!-- Selectboxes -->
            <h2 class="section-title">Listas Desplegables (Select)</h2>
            
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Select Simple</label>
                    <select class="field-input field-select">
                        <option value="">Seleccione una opción</option>
                        <option value="opcion1">Opción 1</option>
                        <option value="opcion2">Opción 2</option>
                        <option value="opcion3">Opción 3</option>
                    </select>
                </div>
                <div class="field-group">
                    <label class="field-label">Select con Valor Preseleccionado</label>
                    <select class="field-input field-select">
                        <option value="baja">Baja</option>
                        <option value="media" selected>Media (Preseleccionada)</option>
                        <option value="alta">Alta</option>
                        <option value="urgente">Urgente</option>
                    </select>
                </div>
                <div class="field-group">
                    <label class="field-label">Select Si/No</label>
                    <select class="field-input field-select">
                        <option value="no" selected>No</option>
                        <option value="si">Sí</option>
                    </select>
                </div>
            </div>

            <!-- Textarea -->
            <h2 class="section-title">Áreas de Texto</h2>
            
            <div class="field-row">
                <div class="field-group field-group--full">
                    <label class="field-label">Textarea Estándar</label>
                    <textarea class="field-input field-textarea" placeholder="Ingrese observaciones, comentarios o información adicional..."></textarea>
                </div>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Textarea Pequeña</label>
                    <textarea class="field-input" style="min-height: 60px;" placeholder="Comentario breve..."></textarea>
                </div>
                <div class="field-group">
                    <label class="field-label">Textarea Grande</label>
                    <textarea class="field-input" style="min-height: 150px;" placeholder="Descripción detallada del proyecto, especificaciones técnicas, requerimientos especiales..."></textarea>
                </div>
            </div>

            <!-- Checkboxes -->
            <h2 class="section-title">Casillas de Verificación (Checkboxes)</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Checkboxes en Línea</h3>
            <div class="checkbox-group checkbox-group--inline">
                <div class="checkbox-item">
                    <input type="checkbox" id="check1" class="checkbox-input" value="opcion1">
                    <label for="check1" class="checkbox-label">Opción 1</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="check2" class="checkbox-input" value="opcion2" checked>
                    <label for="check2" class="checkbox-label">Opción 2 (Marcada)</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="check3" class="checkbox-input" value="opcion3">
                    <label for="check3" class="checkbox-label">Opción 3</label>
                </div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Checkboxes en Columna</h3>
            <div class="checkbox-group">
                <div class="checkbox-item">
                    <input type="checkbox" id="checkCol1" class="checkbox-input" value="caracteristica1">
                    <label for="checkCol1" class="checkbox-label">Característica 1</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="checkCol2" class="checkbox-input" value="caracteristica2">
                    <label for="checkCol2" class="checkbox-label">Característica 2</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="checkCol3" class="checkbox-input" value="caracteristica3">
                    <label for="checkCol3" class="checkbox-label">Característica 3</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" id="checkCol4" class="checkbox-input" value="caracteristica4">
                    <label for="checkCol4" class="checkbox-label">Característica 4</label>
                </div>
            </div>

            <!-- Radio buttons -->
            <h2 class="section-title">Botones de Radio (Selección Única)</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Radios en Columna</h3>
            <div class="radio-group">
                <div class="radio-item">
                    <input type="radio" id="radio1" name="ejemplo1" class="radio-input" value="opcion1">
                    <label for="radio1" class="radio-label">Primera opción</label>
                </div>
                <div class="radio-item">
                    <input type="radio" id="radio2" name="ejemplo1" class="radio-input" value="opcion2" checked>
                    <label for="radio2" class="radio-label">Segunda opción (Seleccionada)</label>
                </div>
                <div class="radio-item">
                    <input type="radio" id="radio3" name="ejemplo1" class="radio-input" value="opcion3">
                    <label for="radio3" class="radio-label">Tercera opción</label>
                </div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Radios en Línea</h3>
            <div class="radio-group radio-group--inline">
                <div class="radio-item">
                    <input type="radio" id="radioInline1" name="ejemplo2" class="radio-input" value="si">
                    <label for="radioInline1" class="radio-label">Sí</label>
                </div>
                <div class="radio-item">
                    <input type="radio" id="radioInline2" name="ejemplo2" class="radio-input" value="no" checked>
                    <label for="radioInline2" class="radio-label">No</label>
                </div>
                <div class="radio-item">
                    <input type="radio" id="radioInline3" name="ejemplo2" class="radio-input" value="tal_vez">
                    <label for="radioInline3" class="radio-label">Tal vez</label>
                </div>
            </div>

            <!-- Estados de validación -->
            <h2 class="section-title">Estados de Validación</h2>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Campo Normal</label>
                    <input type="text" class="field-input" value="Valor normal">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo con Error</label>
                    <input type="text" class="field-input field-input--error" value="Valor inválido">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo Válido</label>
                    <input type="text" class="field-input field-input--success" value="Valor correcto">
                </div>
            </div>

            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Campo Deshabilitado</label>
                    <input type="text" class="field-input" value="No editable" disabled>
                </div>
                <div class="field-group">
                    <label class="field-label">Campo Enfocado</label>
                    <input type="text" class="field-input" value="Campo con foco" style="border-color: var(--border-focus); box-shadow: var(--shadow-focus);">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo Requerido</label>
                    <input type="text" class="field-input" placeholder="Campo obligatorio">
                </div>
            </div>

            <!-- Botones -->
            <h2 class="section-title">Botones y Acciones</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Tipos de Botones</h3>
            <div class="field-row" style="justify-content: flex-start; gap: 15px;">
                <button class="btn btn--primary">Primario</button>
                <button class="btn btn--success">Éxito</button>
                <button class="btn btn--secondary">Secundario</button>
                <button class="btn btn--primary" disabled>Deshabilitado</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Tamaños de Botones</h3>
            <div class="field-row" style="justify-content: flex-start; gap: 15px; align-items: center;">
                <button class="btn btn--primary btn--small">Pequeño</button>
                <button class="btn btn--primary">Normal</button>
                <button class="btn btn--primary btn--large">Grande</button>
            </div>

            <!-- Ejemplos de layouts -->
            <h2 class="section-title">Ejemplos de Distribución</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Tres Columnas Iguales</h3>
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label">Campo 1</label>
                    <input type="text" class="field-input">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo 2</label>
                    <input type="text" class="field-input">
                </div>
                <div class="field-group">
                    <label class="field-label">Campo 3</label>
                    <input type="text" class="field-input">
                </div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Columnas de Tamaños Diferentes</h3>
            <div class="field-row">
                <div class="field-group field-group--small">
                    <label class="field-label">Pequeño</label>
                    <input type="number" class="field-input">
                </div>
                <div class="field-group field-group--large">
                    <label class="field-label">Grande</label>
                    <input type="text" class="field-input">
                </div>
                <div class="field-group field-group--medium">
                    <label class="field-label">Mediano</label>
                    <select class="field-input field-select">
                        <option>Opción</option>
                    </select>
                </div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Campo de Ancho Completo</h3>
            <div class="field-row">
                <div class="field-group field-group--full">
                    <label class="field-label">Descripción Completa</label>
                    <textarea class="field-input field-textarea" placeholder="Este campo ocupa todo el ancho disponible..."></textarea>
                </div>
            </div>

            <!-- Distribuciones con Acciones -->
            <h2 class="section-title">Distribuciones con Botones y Acciones</h2>
            
            <h3 class="section-title" style="font-size: 16px; margin-top: 20px;">Label, Input, Botón, Espacio y Botón</h3>
            <div class="action-bar">
                <label class="action-bar__label">Número de Orden:</label>
                <input type="text" class="field-input action-bar__input" placeholder="ORD-12345">
                <button class="btn btn--primary">Buscar</button>
                <div class="action-bar__spacer"></div>
                <button class="btn btn--success">Procesar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Label, Input, Botón, Espacio</h3>
            <div class="action-bar">
                <label class="action-bar__label">Código de Producto:</label>
                <input type="text" class="field-input action-bar__input" placeholder="PROD-001">
                <button class="btn btn--primary">Validar</button>
                <div class="action-bar__spacer"></div>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Único Botón Alineado al Centro</h3>
            <div class="button-container button-container--center">
                <button class="btn btn--primary btn--large">Continuar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Único Botón Alineado a la Derecha</h3>
            <div class="button-container button-container--right">
                <button class="btn btn--success">Guardar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Único Botón Alineado a la Izquierda</h3>
            <div class="button-container button-container--left">
                <button class="btn btn--secondary">Regresar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Dos Botones con Separación Justificada</h3>
            <div class="button-container button-container--justified">
                <button class="btn btn--secondary">Cancelar</button>
                <button class="btn btn--primary">Aceptar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Dos Botones en Extremos (Izquierda y Derecha)</h3>
            <div class="button-container button-container--extremes">
                <button class="btn btn--secondary">Anterior</button>
                <button class="btn btn--primary">Siguiente</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Tres Botones Centrados con Espaciado</h3>
            <div class="button-container button-container--center-group">
                <button class="btn btn--secondary">Cancelar</button>
                <button class="btn btn--primary">Guardar</button>
                <button class="btn btn--success">Finalizar</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Botones Flotantes (Acción Principal)</h3>
            <div class="button-container button-container--floating">
                <button class="btn btn--secondary btn--small">Ayuda</button>
                <div class="button-spacer"></div>
                <button class="btn btn--primary btn--large">Enviar Solicitud</button>
            </div>

            <h3 class="section-title" style="font-size: 16px; margin-top: 30px;">Grupo de Botones Relacionados</h3>
            <div class="button-group">
                <button class="btn btn--secondary">Borrador</button>
                <button class="btn btn--primary">Revisar</button>
                <button class="btn btn--success">Publicar</button>
            </div>

            <!-- Ejemplo final con botones -->
            <div class="field-row" style="justify-content: center; margin-top: 40px; gap: 20px;">
                <button class="btn btn--secondary">Cancelar</button>
                <button class="btn btn--primary btn--large">Guardar Borrador</button>
                <button class="btn btn--success btn--large">Finalizar</button>
            </div>
        </div>
    </div>

    <script>
        // Ejemplo de funcionalidad básica
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-focus en el primer campo
            const firstInput = document.querySelector('.field-input:not([disabled])');
            if (firstInput) firstInput.focus();

            // Validación simple en tiempo real
            const inputs = document.querySelectorAll('.field-input');
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (this.hasAttribute('required') && !this.value.trim()) {
                        this.classList.add('field-input--error');
                    } else {
                        this.classList.remove('field-input--error');
                        if (this.value.trim()) {
                            this.classList.add('field-input--success');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

