@font-face{font-family:"Silvex Editorial";src:url("fonts/SilvexEditorial-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Silvex Editorial";src:url("fonts/SilvexEditorial-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Silvex Editorial";src:url("fonts/SilvexEditorial-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tinta:#111111; --suave:#3a3a3a; --gris:#6b6b6b; --linea:#ececec;
  --fucsia:#E4157F; --sombra:0 6px 30px rgba(0,0,0,.06); --sombra-hover:0 14px 40px rgba(0,0,0,.08);
  --serif:"Silvex Editorial",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--tinta);font-family:Manrope,system-ui,sans-serif;font-weight:300;letter-spacing:-0.012em;-webkit-font-smoothing:antialiased}
a{color:var(--tinta)} a:hover{color:var(--fucsia)}
h1,h2,.serif{font-family:var(--serif);font-weight:400;word-spacing:-0.2em;margin:0}
h1{font-size:clamp(44px,7vw,72px);line-height:1.02}
h2{font-size:clamp(26px,3.5vw,34px)}
p{margin:0;line-height:1.6}
button,input,select,textarea{font:inherit;letter-spacing:inherit}

.etiqueta{font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.rayita{width:60px;height:2px;background:var(--fucsia)}
.intro{max-width:560px;font-size:18px;color:var(--suave)}

/* Cabecera */
.cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 40px;border-bottom:1px solid #f0f0f0}
.cab .marca{display:flex;align-items:center;gap:14px;text-decoration:none}
.cab img{width:48px;height:48px}
.cab nav{display:flex;flex-wrap:wrap;gap:28px}
.cab nav button{background:none;border:0;padding:6px 0;cursor:pointer;font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta)}
.cab nav button:hover,.cab nav button.activo{color:var(--fucsia)}
.cab nav button.salir{color:var(--gris)}

main{max-width:1120px;margin:0 auto;padding:72px 40px 96px}
.bloque{display:flex;flex-direction:column;gap:18px;margin-bottom:56px}

/* Tarjetas */
.tarjeta{background:#fff;border-radius:22px;box-shadow:var(--sombra);padding:36px;transition:transform .25s ease,box-shadow .25s ease}
.tarjeta:hover{transform:scale(1.012);box-shadow:var(--sombra-hover)}
.quieta:hover{transform:none;box-shadow:var(--sombra)}

/* Fases */
.fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
.fases li{display:flex;flex-direction:column;gap:12px}
.fases .barra{height:3px;border-radius:3px;background:#ededed}
.fases .hecha .barra{background:var(--tinta)}
.fases .actual .barra{background:var(--fucsia)}
.fases .nombre{font-size:15px;font-weight:500}
.fases .estado{font-size:13px;color:var(--gris)}
.fases .actual .estado{color:var(--fucsia)}

/* Carpetas */
.carpetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.carpeta{all:unset;cursor:pointer;background:#fff;border-radius:22px;box-shadow:var(--sombra);padding:32px 28px;display:flex;flex-direction:column;gap:28px;min-height:200px;transition:transform .25s ease,box-shadow .25s ease}
.carpeta:hover{transform:scale(1.015);box-shadow:var(--sombra-hover)}
.carpeta:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}
.carpeta .serif{font-size:26px}
.carpeta .det{font-size:13px;color:var(--gris)}
.nuevo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--fucsia)}

/* Listas */
.fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #f2f2f2}
.fila .txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 220px}
.fila .txt span:first-child{font-size:15px;font-weight:400;overflow-wrap:anywhere}
.sub{font-size:13px;color:var(--gris)}
.vacio{color:var(--gris);font-size:15px;padding:12px 0}

.dos{display:flex;flex-wrap:wrap;gap:24px}
.dos > .ancha{flex:2 1 420px} .dos > .estrecha{flex:1 1 280px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:400;padding:12px 22px;border-radius:999px;border:1px solid #e6e6e6;background:#fff;color:var(--tinta);transition:border-color .2s}
.btn:hover{border-color:var(--tinta);color:var(--tinta)}
.btn.primary{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn.primary:hover{background:#000;color:#fff}
.btn.peq{padding:8px 16px;font-size:13px}
.btn.borrar:hover{border-color:#b00020;color:#b00020}
.btn:disabled{opacity:.5;cursor:wait}
.botones{display:flex;flex-wrap:wrap;gap:10px}

/* Archivos (carpeta) */
.carpeta-vista{display:flex;flex-wrap:wrap;gap:48px}
.lateral{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}
.lateral button{all:unset;cursor:pointer;display:flex;justify-content:space-between;font-size:15px;font-weight:400;padding:14px 18px;border-radius:14px}
.lateral button.activa{background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.07)}
.lateral button:focus-visible{outline:2px solid var(--tinta)}
.contenido{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:40px}
.archivos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.archivo{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:24px 28px}
.archivo .tipo{flex:none;width:52px;height:52px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linea);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;letter-spacing:.08em}
.volver{all:unset;cursor:pointer;font-size:13px;color:var(--gris)}
.volver:hover{color:var(--fucsia)}

/* Acceso */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 16px}
.acceso .caja{width:100%;max-width:440px;border-radius:28px;box-shadow:0 10px 50px rgba(0,0,0,.07);padding:56px 44px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.acceso img{width:120px;height:120px}
.acceso h1{font-size:44px}
form{width:100%;display:flex;flex-direction:column;gap:18px;text-align:left}
label{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--suave)}
input,select,textarea{font-weight:300;font-size:16px;letter-spacing:0;text-transform:none;padding:14px 20px;border-radius:999px;border:1px solid #e6e6e6;background:#fff;color:var(--tinta);width:100%}
textarea{border-radius:18px;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tinta)}
form .btn.primary{padding:16px 24px;font-size:15px;margin-top:6px}
.enlace{all:unset;cursor:pointer;text-align:center;font-size:13px;color:var(--gris)}
.enlace:hover{color:var(--fucsia)}
.aviso{font-size:14px;line-height:1.5;padding:12px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);text-align:left}
.aviso.error{box-shadow:inset 0 0 0 1px #f3c2d3;color:#9b0f55}

/* Administración */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cliente-card{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.cliente-card .serif{font-size:24px}
.subir{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.subir input[type=file]{border-radius:16px;padding:10px 14px;font-size:14px;flex:1 1 220px}
.cargando{padding:120px 20px;text-align:center;color:var(--gris)}

@media (max-width:640px){
  .cab{padding:16px}
  main{padding:48px 16px 72px}
  .tarjeta{padding:26px}
  .acceso .caja{padding:44px 24px}
}