/* Minification failed. Returning unminified contents.
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(79,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(80,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(82,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(107,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(108,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(109,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(115,46): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(116,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(117,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xl'
(117,37): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(129,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-verde'
(133,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(136,25): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xs'
(146,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xl'
(155,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(162,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(170,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(175,32): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-medio'
(177,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(181,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(184,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(185,25): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(188,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(195,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-verde'
(203,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(206,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(210,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-rojo-error'
(216,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(225,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(227,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(228,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(229,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width'
(229,44): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(230,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(231,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(231,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(236,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(241,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(245,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(250,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-rojo-error'
(264,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(266,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(267,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(268,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width'
(268,44): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(269,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(270,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(270,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(277,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(282,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(286,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(301,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(303,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(304,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(305,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width'
(305,44): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(306,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(307,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(307,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(325,32): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(327,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(331,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(336,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(340,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(355,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(357,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(358,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(359,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width'
(359,44): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(360,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(361,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(361,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(385,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(389,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(397,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(398,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(399,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(400,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(401,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(403,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(404,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(405,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(406,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(407,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(408,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(409,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(410,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(411,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(412,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(413,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(414,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(415,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(416,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(418,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(419,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(421,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(422,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(423,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(424,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(425,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(426,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(427,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(428,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(429,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(430,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(431,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(432,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(433,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(434,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(435,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(436,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(437,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(438,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(439,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(440,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(441,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(442,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(443,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(447,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(452,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(453,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(457,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(462,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(471,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(477,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(483,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(498,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(503,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(512,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(514,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(518,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(522,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(535,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(544,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(550,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(556,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(571,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(576,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(585,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(586,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(588,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(592,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(596,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(609,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(618,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(625,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(626,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(627,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(628,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(630,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(634,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-medio'
(646,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(655,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(657,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal'
(668,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(670,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(671,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal'
(676,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-verde'
(694,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(703,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(710,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-verde'
(714,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-rojo-error'
(739,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xl'
(740,29): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(741,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(742,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(744,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(749,24): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(750,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(756,25): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(757,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(762,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(763,25): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xs'
(767,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(773,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(781,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(783,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(784,32): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-medio'
(785,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(792,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(794,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(801,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(806,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul'
(807,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(811,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-azul-hover'
(813,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(825,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(826,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-negro'
(827,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-borde'
(831,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-medio'
(843,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-rojo-error'
(844,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xs'
(847,15): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xs'
(854,22): run-time error CSS1039: Token not allowed after unary operator: '-registro-rojo-error'
(855,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-blanco'
(867,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-verde-exito'
(868,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-xs'
(878,28): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-claro'
(879,17): run-time error CSS1039: Token not allowed after unary operator: '-registro-gris-texto'
(900,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(904,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(908,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(916,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
(935,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(944,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-sm'
(975,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-md'
(979,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-lg'
 */
/* ==========================================================================
   Estilos de Formulario de Registro
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts - Lexend (encabezados) + Inter (texto)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lexend:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Variables CSS - Paleta Formulario Registros
   -------------------------------------------------------------------------- */
:root {
    /* Colores principales */
    --registro-azul: #073984;
    --registro-azul-hover: #0d6efd;
    --registro-negro: #282828;
    --registro-texto-claro: #5e697f;
    --registro-verde: #7ddaa4;
    
    /* Colores auxiliares */
    --registro-blanco: #ffffff;
    --registro-gris-claro: #f8f9fa;
    --registro-gris-medio: #e9ecef;
    --registro-gris-borde: #ced4da;
    --registro-gris-texto: #5e697f;
    --registro-rojo-error: #dc3545;
    --registro-verde-exito: #198754;
    
    /* Tipografías */
    --font-headings: 'Lexend', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Espaciados */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Bordes */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-width: 1px;
    --border-radiu-botones: 50%
    
    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(7, 57, 132, 0.1);
}

/* --------------------------------------------------------------------------
   Reset y Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--registro-negro);
    background-color: var(--registro-gris-claro);
    min-height: 100vh;
    padding: var(--spacing-lg);
}

nav {
    background: #fff;
    border-bottom: 1px solid #dedede;
    margin-bottom: 0;
    min-height: 66px;
    padding: 0 15px 0 0;
    position: absolute;
    top: 0;
    border-width: 0 0 1px;
    right: 0;
    left: 0;
    z-index: 1030;
}
main {
    margin-top: 60px;
}
/* --------------------------------------------------------------------------
   Contenedor del Formulario
   -------------------------------------------------------------------------- */
.registro-form-container {
    max-width: 680px;
    margin: 0 auto;
    background: var(--registro-blanco);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Cabecera del formulario */
.registro-form-header {
    background: linear-gradient(135deg, var(--registro-azul) 0%, #0a4a9e 100%);
    color: var(--registro-blanco);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    position: relative;
}

.registro-form-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--registro-verde);
}

.registro-form-header h1 {
    font-family: var(--font-headings);
    font-size: 2.3rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.registro-form-header p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Cuerpo del formulario */
.registro-form-body {
    padding: var(--spacing-xl);
}

/* --------------------------------------------------------------------------
   Formulario Base
   -------------------------------------------------------------------------- */
.registro-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Grupo de campos */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin:12px 0;
}

/* Fila de campos (para campos en línea) */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

/* Sección del formulario */
.form-section {
    border-top: 1px solid var(--registro-gris-medio);
    padding-top: 2rem;
    margin-top: var(--spacing-sm);
}

.form-section-title {
    font-family: var(--font-headings);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--registro-azul);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--registro-verde);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
.form-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--registro-negro);
}

.form-label .required {
    color: var(--registro-rojo-error);
    margin-left: 2px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--registro-gris-texto);
}

/* --------------------------------------------------------------------------
   Input Text / Textbox
   -------------------------------------------------------------------------- */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--registro-negro);
    background-color: var(--registro-blanco);
    border: var(--border-width) solid var(--registro-gris-borde);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input::placeholder {
    color: var(--registro-gris-texto);
    opacity: 0.7;
}

.form-input:hover {
    border-color: var(--registro-azul-hover);
}

.form-input:focus {
    border-color: var(--registro-azul);
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

.form-input.error {
    border-color: var(--registro-rojo-error);
}

.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* --------------------------------------------------------------------------
   Textarea / Area-Textbox
   -------------------------------------------------------------------------- */
.form-textarea {
    width: 100%;
    min-height: 140px;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--registro-negro);
    background-color: var(--registro-blanco);
    border: var(--border-width) solid var(--registro-gris-borde);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    resize: vertical;
    line-height: 1.5;
}

.form-textarea::placeholder {
    color: var(--registro-gris-texto);
    opacity: 0.7;
}

.form-textarea:hover {
    border-color: var(--registro-azul-hover);
}

.form-textarea:focus {
    border-color: var(--registro-azul);
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

/* --------------------------------------------------------------------------
   Select / Dropdown
   -------------------------------------------------------------------------- */
.form-select-wrapper {
    position: relative;
    margin-bottom: 5px;
}

.form-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--registro-negro);
    background-color: var(--registro-blanco);
    border: var(--border-width) solid var(--registro-gris-borde);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-select-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--registro-gris-texto);
    pointer-events: none;
    transition: border-color var(--transition-fast);
}

.form-select:hover {
    border-color: var(--registro-azul-hover);
}

.form-select:hover + .form-select-wrapper::after,
.form-select-wrapper:hover::after {
    border-top-color: var(--registro-azul-hover);
}

.form-select:focus {
    border-color: var(--registro-azul);
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

.form-select option {
    padding: 0.5rem;
}

/* --------------------------------------------------------------------------
   Date Picker (AirDatepicker customization)
   -------------------------------------------------------------------------- */
.form-datepicker {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--registro-negro);
    background-color: var(--registro-blanco);
    border: var(--border-width) solid var(--registro-gris-borde);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    cursor: pointer;
}

.form-datepicker-wrapper {
    position: relative;
}

.form-datepicker-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236c757d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.form-datepicker:hover {
    border-color: var(--registro-azul-hover);
}

.form-datepicker:focus {
    border-color: var(--registro-azul);
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

/* AirDatepicker Theme Override */
.air-datepicker {
    --adp-font-family: var(--font-body);
    --adp-font-size: 14px;
    --adp-width: 280px;
    --adp-z-index: 1000;
    --adp-padding: 2px;
    --adp-grid-areas: "nav" "body" "buttons";
    --adp-transition-duration: 0.2s;
    --adp-transition-ease: ease-out;
    --adp-transition-offset: 8px;
    --adp-background-color: var(--registro-blanco);
    --adp-background-color-hover: var(--registro-gris-claro);
    --adp-background-color-active: var(--registro-azul);
    --adp-background-color-in-range: rgba(7, 57, 132, 0.1);
    --adp-background-color-in-range-focused: rgba(7, 57, 132, 0.15);
    --adp-background-color-selected-other-month-focused: var(--registro-azul);
    --adp-background-color-selected-other-month: var(--registro-azul);
    --adp-color: var(--registro-negro);
    --adp-color-secondary: var(--registro-gris-texto);
    --adp-accent-color: var(--registro-azul);
    --adp-color-current-date: var(--registro-azul);
    --adp-color-other-month: var(--registro-gris-texto);
    --adp-color-disabled: var(--registro-gris-borde);
    --adp-color-disabled-in-range: var(--registro-gris-borde);
    --adp-color-other-month-hover: var(--registro-negro);
    --adp-border-color: var(--registro-gris-borde);
    --adp-border-color-inner: var(--registro-gris-medio);
    --adp-border-radius: var(--border-radius);
    --adp-border-color-inline: var(--registro-gris-borde);
    --adp-nav-height: 30px;
    --adp-nav-arrow-color: var(--registro-azul);
    --adp-nav-action-size: 30px;
    --adp-nav-color-secondary: var(--registro-azul);
    --adp-day-name-color: var(--registro-azul);
    --adp-day-name-color-hover: var(--registro-azul-hover);
    --adp-day-cell-width: 1fr;
    --adp-day-cell-height: 36px;
    --adp-month-cell-height: 36px;
    --adp-year-cell-height: 36px;
    --adp-pointer-size: 10px;
    --adp-poiner-border-radius: 2px;
    --adp-pointer-offset: 14px;
    --adp-cell-border-radius: 6px;
    --adp-btn-height: 36px;
    --adp-btn-color: var(--registro-azul);
    --adp-btn-color-hover: var(--registro-blanco);
    --adp-btn-background-color-hover: var(--registro-azul);
    --adp-btn-background-color-active: var(--registro-azul);
    border: 1px solid var(--registro-gris-borde);
    box-shadow: var(--shadow-lg);
}

.air-datepicker-nav--title {
    font-family: var(--font-headings);
    font-weight: 500;
}

.air-datepicker-cell.-selected- {
    background: var(--registro-azul);
    color: var(--registro-blanco);
}

.air-datepicker-cell.-current- {
    color: var(--registro-azul);
    font-weight: 600;
}

.air-datepicker-cell.-focus- {
    background: var(--registro-gris-claro);
}

/* --------------------------------------------------------------------------
   Radio Buttons
   -------------------------------------------------------------------------- */
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-radio-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    position: relative;
}

.form-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--registro-gris-borde);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.form-radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--registro-azul);
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.form-radio:hover .form-radio-custom {
    border-color: var(--registro-azul-hover);
}

.form-radio input[type="radio"]:checked + .form-radio-custom {
    border-color: var(--registro-azul);
}

.form-radio input[type="radio"]:checked + .form-radio-custom::after {
    transform: scale(1);
}

.form-radio input[type="radio"]:focus + .form-radio-custom {
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

.form-radio-label {
    font-size: 0.95rem;
    color: var(--registro-negro);
    user-select: none;
}
/* --------------------------------------------------------------------------
   Radio Buttons
   -------------------------------------------------------------------------- */
.form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-checkbox-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    position: relative;
}

.form-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--registro-gris-borde);
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.form-checkbox-custom::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 25%;
    border: 2px solid var(--registro-azul);
    background: var(--registro-azul);
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.form-checkbox:hover .form-checkbox-custom {
    border-color: var(--registro-azul-hover);
}

.form-checkbox input[type="checkbox"]:checked + .form-checkbox-custom {
    border-color: var(--registro-azul);
}

.form-checkbox input[type="checkbox"]:checked + .form-checkbox-custom::after {
    transform: scale(1);
}

.form-checkbox input[type="checkbox"]:focus + .form-checkbox-custom {
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.15);
}

.form-checkbox-label {
    font-size: 0.95rem;
    color: var(--registro-negro);
    user-select: none;
}
/* --------------------------------------------------------------------------
   Toggle Switch (Checkbox Yes/No)
   -------------------------------------------------------------------------- */
.form-toggle-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--registro-gris-claro);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.form-toggle:hover {
    background: var(--registro-gris-medio);
}

.form-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-toggle-label {
    font-size: 0.95rem;
    color: var(--registro-negro);
    user-select: none;
    flex: 1;
}

.form-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--registro-gris-borde);
    border-radius: 14px;
    transition: background-color var(--transition-normal);
    flex-shrink: 0;
}

.form-toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--registro-blanco);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal);
}

.form-toggle input[type="checkbox"]:checked + .form-toggle-content .form-toggle-switch,
.form-toggle input[type="checkbox"]:checked ~ .form-toggle-switch {
    background: var(--registro-verde);
}

.form-toggle input[type="checkbox"]:checked + .form-toggle-content .form-toggle-switch::before,
.form-toggle input[type="checkbox"]:checked ~ .form-toggle-switch::before {
    transform: translateX(24px);
}

.form-toggle input[type="checkbox"]:focus + .form-toggle-content .form-toggle-switch,
.form-toggle input[type="checkbox"]:focus ~ .form-toggle-switch {
    box-shadow: 0 0 0 3px rgba(125, 218, 164, 0.3);
}

.form-toggle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: var(--spacing-md);
}

/* Estados del toggle */
.form-toggle-status {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--registro-gris-texto);
    min-width: 30px;
    text-align: right;
}

.form-toggle input[type="checkbox"]:checked ~ .form-toggle-status,
.form-toggle input[type="checkbox"]:checked + .form-toggle-content .form-toggle-status {
    color: var(--registro-verde);
}

.form-toggle-label .required {
    color: var(--registro-rojo-error);
    margin-left: 2px;
}

/* --------------------------------------------------------------------------
   File Upload
   -------------------------------------------------------------------------- */
.form-file-wrapper {
    position: relative;
}

.form-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.form-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    border: 2px dashed var(--registro-gris-borde);
    border-radius: var(--border-radius);
    background: var(--registro-gris-claro);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.form-file-label:hover {
    border-color: var(--registro-azul-hover);
    background: var(--registro-blanco);
}

.form-file-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
    color: var(--registro-azul);
}

.form-file-text {
    font-size: 0.95rem;
    color: var(--registro-negro);
    margin-bottom: var(--spacing-xs);
}

.form-file-text span {
    color: var(--registro-azul);
    font-weight: 500;
}

.form-file-hint {
    font-size: 0.8rem;
    color: var(--registro-gris-texto);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--registro-gris-medio);
    margin-top: var(--spacing-md);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 1rem 2rem;
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
}

.btn-primary {
    background: var(--registro-azul);
    color: var(--registro-blanco);
}

.btn-primary:hover {
    background: var(--registro-azul-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(7, 57, 132, 0.3);
}

.btn-secondary {
    background: var(--registro-gris-claro);
    color: var(--registro-negro);
    border: 1px solid var(--registro-gris-borde);
}

.btn-secondary:hover {
    background: var(--registro-gris-medio);
}

.btn-secondary:focus {
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.1);
}

/* --------------------------------------------------------------------------
   Mensajes de Error y Validación
   -------------------------------------------------------------------------- */
.form-error {
    font-size: 0.8rem;
    color: var(--registro-rojo-error);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-error::before {
    content: '!';
    width: 16px;
    height: 16px;
    background: var(--registro-rojo-error);
    color: var(--registro-blanco);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-success {
    font-size: 0.8rem;
    color: var(--registro-verde-exito);
    margin-top: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Estados Disabled
   -------------------------------------------------------------------------- */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
.form-datepicker:disabled {
    background-color: var(--registro-gris-claro);
    color: var(--registro-gris-texto);
    cursor: not-allowed;
    opacity: 0.7;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    nav{
        text-align:center
    }
    main{
        margin-top: 70px;
    }
    body {
        padding: var(--spacing-md);
    }
    
    .registro-form-container {
        border-radius: var(--border-radius);
    }
    
    .registro-form-header {
        padding: var(--spacing-lg);
    }
    
    .registro-form-header h1 {
        font-size: 1.4rem;
    }
    
    .registro-form-body {
        padding: var(--spacing-lg);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .form-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .form-toggle-content {
        width: 100%;
    }
    
    .form-radio-group.horizontal {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .form-select {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .form-select-wrapper {
        max-width: 100%;
        overflow: hidden;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }
    
    .registro-form-container {
        border-radius: 0;
        box-shadow: none;
    }
    
    .registro-form-header h1 {
        font-size: 1.25rem;
    }
    
    .registro-form-body {
        padding: var(--spacing-md);
    }
    
    .form-file-label {
        padding: var(--spacing-lg);
    }
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.form-input.error,
.form-textarea.error,
.form-select.error {
    animation: shake 0.3s ease;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media (min-width:769px){
    /* Fila con proporción 2/3 + 1/3 */
    .form-row.col-2-1 {
        grid-template-columns: 2fr 1fr;
    }

    /* Fila con proporción 1/3 + 2/3 */
    .form-row.col-1-2 {
        grid-template-columns: 1fr 2fr;
    }
    /* Fila con proporción 1/3 + 2/3 */
    .form-row.col-1 {
        grid-template-columns: 1fr;
    }
}