/* Panel de contenido · Fundación PRODE
   Misma paleta y misma tipografía que el sitio, para que no se sienta
   otra cosa. Sin animaciones: es una herramienta de trabajo. */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@800&family=Poppins:wght@400;500;600&display=swap');

:root{
  --naranja:#FD6500; --naranja-texto:#B84700;
  --tinta:#0A0A0B; --gris:#4A4A52; --gris-suave:#8A8A93;
  --hueso:#FBF7F1; --linea:#E6E1D8; --linea-fuerte:#D2CBBE; --blanco:#fff;
  --mal:#B3261E; --bien:#1B6B3A;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--hueso);color:var(--tinta);
  font-family:Poppins,system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--naranja-texto)}

.barra{
  background:var(--blanco);border-bottom:1px solid var(--linea);
  padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:5;flex-wrap:wrap;
}
.marca{font-family:Mukta,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--tinta);text-decoration:none}
.marca b{color:var(--naranja)}
.yo{font-size:13px;color:var(--gris)}

main{max-width:760px;margin:0 auto;padding:28px 20px 60px}
h1{font-family:Mukta,sans-serif;font-weight:800;font-size:clamp(26px,6vw,36px);line-height:1.1;margin:0 0 6px;letter-spacing:-.015em}
.nota{color:var(--gris);font-size:14.5px;margin:0 0 22px}
.miga{margin:0 0 10px;font-size:14px}
.miga a{text-decoration:none}

.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:20px;display:grid;gap:18px}
label{display:grid;gap:7px;font-weight:600;font-size:14.5px}
input[type=text],input[type=password],input:not([type]){
  font:inherit;font-weight:400;padding:12px 13px;border:1px solid var(--linea);
  border-radius:10px;background:var(--hueso);color:var(--tinta);width:100%;
}
input[type=file]{font:inherit;font-size:14px;font-weight:400}
input:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
small{font-weight:400;color:var(--gris);font-size:13px;line-height:1.45}

.btn{
  font:inherit;font-weight:600;font-size:15px;
  background:var(--naranja);color:var(--tinta);border:0;
  padding:13px 22px;border-radius:999px;cursor:pointer;
  text-decoration:none;display:inline-block;text-align:center;min-height:46px;
}
.btn-2{background:var(--blanco);border:1px solid var(--linea)}
.btn:hover{filter:brightness(.95)}

.aviso{border-radius:10px;padding:12px 14px;font-size:14.5px;margin:0 0 18px}
.aviso.mal{background:#FDECEA;color:var(--mal);border:1px solid #F3C9C4}
.aviso.bien{background:#E9F5EE;color:var(--bien);border:1px solid #C3E2CF}
.lista-mal{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:18px 18px 18px 36px;line-height:1.6}
.lista-mal li+li{margin-top:12px}

.tarjetas{display:grid;gap:12px}
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  padding:18px 20px;text-decoration:none;color:var(--tinta);display:grid;gap:3px;
}
.tarjeta b{font-family:Mukta,sans-serif;font-size:21px}
.tarjeta span{color:var(--gris);font-size:14px}
.tarjeta i{font-style:normal;color:var(--naranja-texto);font-size:13px;font-weight:600}
.tarjeta:hover{border-color:var(--naranja)}

.fichas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fichas a{
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:12px 16px;display:flex;align-items:center;gap:16px;
  text-decoration:none;color:var(--tinta);min-height:64px;
}
.fichas a:hover{border-color:var(--naranja)}
.fichas b{flex:1;font-weight:600;font-size:15px}
.fichas i{font-style:normal;color:var(--naranja-texto);font-size:13px;font-weight:600}
.mini{width:84px;height:40px;display:flex;align-items:center;justify-content:center;flex:none}
.mini img{max-width:100%;max-height:100%;object-fit:contain}
.previa{background:var(--hueso);border:1px solid var(--linea);border-radius:10px;padding:14px;display:flex;justify-content:center}
.previa img{max-height:70px;max-width:100%;object-fit:contain}

.borrar{margin-top:26px}
.link-mal{background:none;border:0;color:var(--mal);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:10px 0}

footer{max-width:760px;margin:0 auto;padding:0 20px 40px;color:var(--gris-suave);font-size:12.5px}

/* ── Campos que se sumaron con las secciones nuevas ── */
textarea{font:inherit;font-weight:400;padding:12px 13px;border:1px solid var(--linea);
  border-radius:10px;background:var(--hueso);color:var(--tinta);width:100%;resize:vertical;line-height:1.6}
select,input[type=date],input[type=url]{font:inherit;font-weight:400;padding:12px 13px;
  border:1px solid var(--linea);border-radius:10px;background:var(--hueso);color:var(--tinta);width:100%}
textarea:focus-visible,select:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
.casillas{display:grid;gap:8px}
.casilla{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px;min-height:40px}
.casilla input{width:19px;height:19px;accent-color:var(--naranja);flex:none}
.fichas b .sub{display:block;font-weight:400;font-size:13px;color:var(--gris-suave);margin-top:1px}
.fichas .rotulo{
  font-family:Mukta,sans-serif;font-weight:800;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--naranja-texto);padding:16px 2px 2px;
}
.dia-chip{
  flex:none;min-width:96px;font-size:12px;font-weight:600;color:var(--gris);
  background:var(--hueso);border-radius:999px;padding:6px 11px;text-align:center;
}
.previa a{font-size:14px}
.aviso:not(.mal):not(.bien){background:var(--blanco);border:1px dashed var(--linea);color:var(--gris)}
@media (max-width:520px){
  .fichas a{flex-wrap:wrap}
  .dia-chip{min-width:0}
}

/* ── El ojito de las contraseñas ── */
.clave-caja{position:relative;display:block}
.clave-caja input{padding-right:52px}
.ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-content:center;
  background:none;border:0;border-radius:9px;cursor:pointer;color:var(--gris-suave);
}
.ojo svg{width:21px;height:21px}
.ojo:hover{color:var(--tinta)}
.ojo.abierto{color:var(--naranja-texto)}
.ojo:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
/* Tachada cuando la contraseña está a la vista, para que se note. */
.ojo.abierto::after{
  content:"";position:absolute;left:9px;right:9px;top:50%;height:1.8px;
  background:currentColor;transform:rotate(-45deg);border-radius:2px;
}

/* Un aviso entre campos: no es un campo, es una nota. */
.campo-aviso{
  margin:0;background:var(--hueso);border:1px dashed var(--linea-fuerte);
  border-radius:10px;padding:14px 16px;
  font-size:13.5px;line-height:1.55;color:var(--gris);
}
.campo-aviso b{color:var(--tinta);font-weight:600}

/* Los campos apagados de quien sólo puede mirar. El `fieldset` no
   lleva borde ni relleno: no es una agrupación visual, es el
   interruptor que apaga todo lo de adentro de una sola vez. */
.solo-ver{border:0;padding:0;margin:0;opacity:.72}
.solo-ver input,.solo-ver textarea,.solo-ver select{background:#f4f6f9;cursor:not-allowed}