/* Portal proyectos.cloudfibra.com — azul del logo CloudFibra sobre fondo claro u oscuro. */
:root {
  --marca: #4cc3ec;
  --marca-fuerte: #1b8fc0;
  --fondo: #f4f7fa;
  --tarjeta: #ffffff;
  --texto: #14212b;
  --suave: #5b6b78;
  --borde: #dbe3ea;
  --error: #b42318;
  --error-fondo: #fdecea;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1820;
    --tarjeta: #17232d;
    --texto: #e6eef4;
    --suave: #9fb1bf;
    --borde: #2a3a47;
    --error: #ff8a80;
    --error-fondo: #3a1d1b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.sub { color: var(--suave); margin: 0 0 1.25rem; }
.error { background: var(--error-fondo); color: var(--error); padding: .6rem .8rem; border-radius: 8px; }
.aviso { color: var(--suave); }

/* Acceso */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.tarjeta {
  width: 100%; max-width: 380px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 14px; padding: 2rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .06);
}
.tarjeta .logo { display: block; margin-bottom: 1.25rem; }
label { display: block; font-weight: 600; margin: .9rem 0 .3rem; }
input {
  width: 100%; padding: .7rem .8rem; font: inherit; color: inherit;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
button {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 8px;
  padding: .7rem 1rem; background: var(--marca-fuerte); color: #fff;
}
.tarjeta button { width: 100%; margin-top: 1.4rem; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); padding: .4rem .9rem; }

/* Portada */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 16px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.sesion { display: flex; align-items: center; gap: .75rem; color: var(--suave); }
.sesion form { margin: 0; }
.portada { max-width: 960px; margin: 0 auto; padding: 2rem 16px; }
.rejilla {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.proyecto {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  padding: 1.25rem; min-height: 120px; text-decoration: none; color: inherit;
  background: var(--tarjeta); border: 1px solid var(--borde); border-left: 4px solid var(--marca);
  border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease;
}
.proyecto:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / .08); }
.proyecto strong { font-size: 1.15rem; }
.proyecto span { color: var(--suave); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .proyecto { transition: none; } .proyecto:hover { transform: none; } }

/* Credenciales */
.correcto { background: color-mix(in srgb, var(--marca) 15%, transparent); padding: .6rem .8rem; border-radius: 8px; }
.migas { margin: 0 0 .5rem; }
.migas a, .credenciales a { color: var(--marca-fuerte); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ficha {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  padding: 1.25rem; margin: 0 0 1.5rem;
}
.ficha h2 { margin: 0; font-size: 1.15rem; }
.campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.con-boton { display: flex; gap: .5rem; }
.con-boton button { flex: none; }
.botones { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; }
a.boton { display: inline-block; text-decoration: none; font-weight: 600; border-radius: 8px; }
a.boton.secundario { color: var(--texto); border: 1px solid var(--borde); padding: .4rem .9rem; }
button.peligro { color: var(--error); }
.filtro { max-width: 420px; margin-bottom: 1rem; }
.credenciales { width: 100%; border-collapse: collapse; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.credenciales th, .credenciales td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: middle; overflow-wrap: anywhere; }
.credenciales th { color: var(--suave); font-size: .9rem; font-weight: 600; }
.credenciales button, .credenciales a.boton { padding: .3rem .7rem; font-size: .9rem; }
.celda-clave { white-space: nowrap; }
.celda-clave .clave { display: inline-block; min-width: 6.5rem; margin-right: .35rem; white-space: normal; overflow-wrap: anywhere; }
.acciones { white-space: nowrap; text-align: right; }
.acciones form { display: inline; margin: 0; }
@media (max-width: 760px) {
  .credenciales thead { display: none; }
  .credenciales, .credenciales tbody, .credenciales tr, .credenciales td { display: block; }
  .credenciales tr { border-bottom: 1px solid var(--borde); padding: .5rem 0; }
  .credenciales td { border: 0; padding: .25rem .75rem; text-align: left; white-space: normal; }
  .credenciales td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; color: var(--suave); font-size: .8rem; }
}