/* ============================================================ DNC 360° · Instituto Mexicano de Mujeres del Agro A.C. Paleta tomada directamente de la papelería institucional (hoja membretada Mujeres del Agro). ============================================================ */ :root{ /* Marca */ --magenta:#B33D87; /* barras de sección de la hoja membretada */ --magenta-logo:#B9379F; /* magenta del logotipo */ --magenta-osc:#8F2D6C; --magenta-claro:#F1D7EC; /* patrón lateral del membrete */ --magenta-papel:#FBF2F8; --verde:#0D5729; /* verde de títulos y horas */ --verde-osc:#08401E; --verde-logo:#1D4A22; --verde-vivo:#2DA442; /* verde del trazo curvo del logo */ --verde-claro:#E6F0E9; --verde-papel:#F4F9F5; /* Neutros */ --tinta:#292929; --gris:#6E6E6E; --linea:#E6E4E1; --fila:#FBFBFB; --fondo:#FFFFFF; --papel:#FFFFFF; /* Niveles de profesionalización */ --critico:#C0392B; --desarrollo:#D98324; --funcional:#B33D87; --consolidado:#0D5729; --radio:10px; --sombra:0 1px 2px rgba(41,41,41,.05), 0 6px 18px rgba(41,41,41,.05); } *{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--fondo);color:var(--tinta); font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--verde)} h1,h2,h3{line-height:1.25;margin:0 0 .4em} h1{font-size:1.5rem;letter-spacing:-.01em} h2{font-size:1.05rem} .contenedor{max-width:880px;margin:0 auto;padding:0 20px} .contenedor-ancho{max-width:1240px;margin:0 auto;padding:0 20px} /* ------------------------------------------------------------ Elementos de la hoja membretada oficial: la franja de íconos agrícolas del costado derecho y la marca de agua del logotipo abajo a la izquierda. Se activan con class="membretada" en . ------------------------------------------------------------ */ :root{ --franja:clamp(70px, 11vw, 168px); } html.membretada{background:var(--fondo)} html.membretada body{background:transparent;padding-right:var(--franja);position:relative} /* Franja de íconos del costado derecho */ html.membretada body::after{ content:'';position:fixed;top:0;right:0;bottom:0;width:var(--franja); background:url('franja-derecha.png') no-repeat right top;background-size:cover; pointer-events:none;z-index:6; } /* Marca de agua abajo a la izquierda. Va como elemento fijo y no como fondo con background-attachment:fixed, porque Safari en iOS no soporta esa propiedad y la marca no aparecía. El alto es el 39.4% del ancho, la proporción de la imagen (926x365). */ html.membretada body::before{ content:'';position:fixed;left:0;bottom:0;z-index:-1;pointer-events:none; width:clamp(230px, 25vw, 430px); height:clamp(91px, 9.85vw, 170px); background:url('marca-agua.png') no-repeat left bottom;background-size:contain; } /* En celular y tableta la franja se reduce a un filo, con el patrón a su tamaño real y recortado, para no restarle ancho a las preguntas. La marca de agua se conserva: va detrás del contenido y no ocupa espacio. */ @media(max-width:1023px){ :root{ --franja:30px; } html.membretada body::after{background-size:118px auto} /* En celular las tarjetas ocupan casi todo el ancho y taparían una marca de agua fija. Se ancla al final de la página, detrás del pie, que es donde aparece en la hoja membretada y donde sí queda espacio en blanco para verla. */ html.membretada body::before{ position:absolute; width:clamp(260px, 72vw, 420px); height:clamp(103px, 28.4vw, 166px); } } @media(max-width:400px){ :root{ --franja:24px; } html.membretada body::after{background-size:96px auto} } /* ---------- Membrete ---------- */ .encabezado{background:#fff;padding:26px 0 0} .encabezado .membrete{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .logo-marca{width:132px;height:auto;display:block;margin-bottom:10px} .encabezado h1{margin:0;color:var(--verde);font-size:1.42rem;font-weight:700; text-transform:uppercase;letter-spacing:.005em} .encabezado .sub{margin:4px 0 0;color:var(--gris);font-size:.9rem} .encabezado .inst{margin:0;color:var(--gris);font-size:.9rem} .regla{height:2px;background:var(--magenta);margin:16px 0 0;border:0} /* ---------- Barra de progreso y pasos ---------- */ .progreso-barra{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--linea); padding:11px 0 8px;box-shadow:0 2px 10px rgba(41,41,41,.05)} .progreso-barra .fila{display:flex;align-items:center;gap:14px;font-size:.82rem;color:var(--gris)} .progreso-barra .fila strong{color:var(--verde)} .pista{flex:1;height:7px;background:var(--verde-claro);border-radius:99px;overflow:hidden} .pista span{display:block;height:100%;width:0;border-radius:99px;transition:width .35s ease; background:linear-gradient(90deg,var(--verde),var(--magenta))} .pasos{display:flex;gap:6px;overflow-x:auto;padding:9px 0 2px;scrollbar-width:thin} .chip-paso{flex:none;background:#fff;border:1px solid var(--linea);border-radius:99px; padding:6px 13px;font:inherit;font-size:.79rem;color:var(--gris);cursor:pointer; white-space:nowrap;transition:.15s;display:flex;align-items:center;gap:6px} .chip-paso b{background:var(--verde-claro);color:var(--verde);border-radius:50%; width:19px;height:19px;display:grid;place-items:center;font-size:.72rem;flex:none} .chip-paso:hover:not(:disabled){border-color:var(--magenta);color:var(--magenta-osc)} .chip-paso:disabled{opacity:.45;cursor:not-allowed} .chip-paso.activo{background:var(--magenta);border-color:var(--magenta);color:#fff;font-weight:700} .chip-paso.activo b{background:rgba(255,255,255,.28);color:#fff} .chip-paso.completo{border-color:var(--verde);color:var(--verde)} .chip-paso.completo b{background:var(--verde);color:#fff;font-size:0} .chip-paso.completo b::after{content:'✓';font-size:.7rem} .chip-paso.activo.completo b{background:rgba(255,255,255,.28)} /* ---------- Tarjetas y secciones ---------- */ .tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio); padding:0;margin:18px 0;box-shadow:var(--sombra);overflow:hidden} .intro{padding:22px 24px;border-left:3px solid var(--magenta)} .intro h2{color:var(--verde)} .intro p{margin:.5em 0;color:#3d3d3d} /* Barra de sección, igual que las barras de la hoja membretada */ .seccion-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; background:var(--magenta);color:#fff;padding:12px 20px} .seccion-titulo h2{margin:0;color:#fff;font-size:1rem;font-weight:700} .etiqueta-dim{font-size:.8rem;color:rgba(255,255,255,.92);font-weight:400} .seccion-desc{color:var(--gris);font-size:.9rem;margin:0;padding:14px 20px 0} .pregunta{padding:16px 20px;border-top:1px solid var(--linea)} .pregunta:first-of-type{border-top:0;padding-top:18px} .pregunta:nth-of-type(even){background:var(--fila)} .pregunta.faltante{background:#FDF2F1;box-shadow:inset 3px 0 0 var(--critico)} .pregunta .enunciado{font-weight:700;margin:0 0 10px;display:flex;gap:9px;align-items:baseline} .num{color:var(--verde);font-weight:700;font-size:.9rem;flex:none;min-width:1.5em} .ayuda{font-size:.83rem;color:var(--gris);margin:-4px 0 10px 2.1em} .opciones{display:grid;gap:8px} .opciones.cols-2{grid-template-columns:1fr 1fr} @media(max-width:640px){.opciones.cols-2{grid-template-columns:1fr}} .opcion{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--linea); border-radius:8px;cursor:pointer;background:#fff;transition:.14s ease} .opcion:hover{border-color:var(--verde);background:var(--verde-papel)} .opcion input{margin:3px 0 0;accent-color:var(--verde);flex:none;width:17px;height:17px} .opcion.multi input{border-radius:3px} .opcion .val{font-weight:700;color:var(--verde);flex:none;min-width:1.1em} .opcion.marcada{border-color:var(--verde);background:var(--verde-claro);box-shadow:inset 0 0 0 1px var(--verde)} .opcion.na .val{color:var(--gris)} .opcion.na.marcada{border-color:var(--gris);background:#F1F0EE;box-shadow:inset 0 0 0 1px var(--gris)} input[type=text],input[type=date],input[type=tel],input[type=password],textarea,select{ width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:8px; font:inherit;color:inherit;background:#fff} input:focus,textarea:focus,select:focus{outline:2px solid var(--magenta);outline-offset:1px;border-color:var(--magenta)} textarea{min-height:110px;resize:vertical} .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px} .campos .ancho{grid-column:1/-1} @media(max-width:640px){.campos{grid-template-columns:1fr}} .campo label{display:block;font-weight:700;font-size:.88rem;margin-bottom:5px} .campo .ayuda{margin:5px 0 0} .req{color:var(--critico)} .otro-campo{margin-top:8px} .limite{margin:8px 0 0;padding:7px 11px;background:var(--magenta-papel);border-left:3px solid var(--magenta); border-radius:0 6px 6px 0;color:var(--magenta-osc);font-size:.83rem;font-weight:700} /* ---------- Botones ---------- */ .boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--verde);color:#fff; border:0;border-radius:8px;padding:13px 24px;font:inherit;font-weight:700;cursor:pointer;transition:.15s} .boton:hover{background:var(--verde-osc)} .boton.secundario{background:#fff;color:var(--verde);border:1px solid var(--verde)} .boton.secundario:hover{background:var(--verde-claro)} .boton.oro{background:var(--magenta);color:#fff} .boton.oro:hover{background:var(--magenta-osc)} .boton:disabled{opacity:.55;cursor:not-allowed} .boton-texto{background:none;border:0;color:var(--gris);font:inherit;font-size:.84rem; text-decoration:underline;cursor:pointer;padding:6px} .boton-texto:hover{color:var(--critico)} .nav-pasos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 16px; padding:16px 0;border-top:1px solid var(--linea)} .nav-pasos .boton{min-width:150px} .nav-pasos #pista-paso{flex:1;text-align:center} @media(max-width:560px){ .nav-pasos{gap:10px} .nav-pasos .boton{flex:1;min-width:0} .nav-pasos #pista-paso{order:3;flex-basis:100%;text-align:center} } .acciones{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 60px} .aviso{padding:12px 14px;border-radius:8px;font-size:.9rem;margin:12px 0} .aviso.error{background:#FDECEA;color:#8C2018;border:1px solid #F3C2BC} .aviso.ok{background:var(--verde-claro);color:var(--verde);border:1px solid #BCD6C1} .pie{padding:22px 0 130px;color:var(--gris);font-size:.8rem;border-top:1px solid var(--linea);margin-top:10px} .pie p{margin:.3em 0} /* ---------- Pantalla de agradecimiento ---------- */ .gracias{text-align:center;padding:46px 26px} .gracias .palomita{width:70px;height:70px;border-radius:50%;background:var(--verde-claro);color:var(--verde); display:grid;place-items:center;font-size:2rem;margin:0 auto 18px} .gracias h1{color:var(--verde)} .carta{padding:26px 30px;border-left:3px solid var(--magenta)} .carta h2{color:var(--magenta-osc);font-size:1.15rem;margin-bottom:14px} .carta p{margin:0 0 14px;color:#3d3d3d;line-height:1.65} .carta .firma{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--linea); color:var(--verde);font-weight:700} .carta .firma span{color:var(--gris);font-weight:400;font-size:.9rem} @media(max-width:560px){.carta{padding:22px 20px}} /* ---------- Panel administrativo ---------- */ /* Encabezado del panel: mismo membrete que la encuesta, con las acciones a la derecha */ .membrete-admin{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .membrete-admin h1{margin:0;color:var(--verde);font-size:1.3rem;font-weight:700;text-transform:uppercase} .membrete-admin .sub{margin:4px 0 0;color:var(--gris);font-size:.88rem} .acciones-admin{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:2px} .acciones-admin button{background:#fff;color:var(--verde);border:1px solid var(--verde); border-radius:7px;padding:8px 15px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:.15s} .acciones-admin button:hover{background:var(--verde-claro)} .acciones-admin button#btn-salir{color:var(--magenta-osc);border-color:var(--magenta)} .acciones-admin button#btn-salir:hover{background:var(--magenta-papel)} .login-caja{max-width:410px;margin:7vh auto;padding:0 20px} .login-caja .tarjeta{padding:28px} .login-caja .logo-marca{width:150px;margin:0 auto 16px} .login-caja .campo{margin-bottom:14px} .filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:18px 0} .filtros .campo{min-width:180px;flex:1} .filtros .campo label{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris)} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:14px 0} .kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra)} .kpi .n{font-size:1.95rem;font-weight:700;line-height:1.1;color:var(--verde)} .kpi .t{font-size:.78rem;color:var(--gris);text-transform:uppercase;letter-spacing:.04em} .kpi .d{font-size:.84rem;color:var(--gris);margin-top:4px} .kpi.acento{border-left:3px solid var(--magenta)} .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:16px} .rejilla.tres{grid-template-columns:1fr 1fr 1fr} @media(max-width:900px){.rejilla,.rejilla.tres{grid-template-columns:1fr}} .panel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px; box-shadow:var(--sombra);margin-bottom:16px} .panel h3{margin:0 0 2px;font-size:1rem;color:var(--verde)} .panel .nota{font-size:.82rem;color:var(--gris);margin:0 0 14px} .pestanas{display:flex;gap:6px;border-bottom:1px solid var(--linea);margin:18px 0 0;flex-wrap:wrap} .pestanas button{background:none;border:0;border-bottom:3px solid transparent;padding:11px 15px; font:inherit;font-weight:700;color:var(--gris);cursor:pointer;border-radius:7px 7px 0 0} .pestanas button:hover{background:var(--magenta-papel);color:var(--magenta-osc)} .pestanas button.activa{color:var(--magenta-osc);border-bottom-color:var(--magenta);background:var(--papel)} table{width:100%;border-collapse:collapse;font-size:.88rem} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:top} th{font-size:.73rem;text-transform:uppercase;letter-spacing:.04em;color:#fff; background:var(--magenta);position:sticky;top:0;cursor:pointer;white-space:nowrap} th:hover{background:var(--magenta-osc)} tbody tr:nth-child(even){background:var(--fila)} tbody tr:hover{background:var(--verde-claro)} .tabla-scroll{overflow:auto;max-height:560px;border:1px solid var(--linea);border-radius:8px} .pastilla{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:700;white-space:nowrap} .n-critico{background:#FBE6E3;color:var(--critico)} .n-desarrollo{background:#FBEEDB;color:#96570F} .n-funcional{background:#F7E6F1;color:var(--magenta-osc)} .n-consolidado{background:#E2F0E7;color:var(--consolidado)} .n-na{background:#EFEDEA;color:var(--gris)} .barra-fila{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:12px;align-items:center; margin:9px 0;font-size:.88rem} .barra-fila .pista-b{background:#EFEDEA;border-radius:5px;height:22px;overflow:hidden} .barra-fila .pista-b span{display:block;height:100%;border-radius:5px;transition:width .5s ease} .barra-fila .cifra{font-weight:700;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right} .leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--gris);margin-top:12px} .leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px} .lista-textos{display:grid;gap:10px;max-height:420px;overflow:auto} .cita{border-left:3px solid var(--magenta);background:var(--magenta-papel);padding:10px 14px; border-radius:0 8px 8px 0;font-size:.9rem} .cita .autor{display:block;font-size:.76rem;color:var(--gris);margin-top:6px} .modal{position:fixed;inset:0;background:rgba(41,41,41,.5);display:grid;place-items:center;padding:18px;z-index:50} .modal .caja{background:var(--papel);border-radius:var(--radio);max-width:780px;width:100%;max-height:88vh; overflow:auto;padding:24px} .modal .caja h2{color:var(--verde)} .modal .caja h3{color:var(--magenta-osc);font-size:.95rem} .modal .cerrar{float:right;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--gris);line-height:1} .vacio{text-align:center;color:var(--gris);padding:40px 18px} .gris{color:var(--gris)} .mini{font-size:.8rem} .paso[hidden]{display:none} @media print{ html.membretada{background:none} html.membretada body{padding-right:0} html.membretada body::after,.acciones-admin,.pestanas,.filtros,.boton,.progreso-barra{display:none} .panel,.tarjeta{break-inside:avoid;box-shadow:none} }