/* Panel de redes de OH WOW!  ·  Tinta, lima y aire. */

:root {
  --tinta:    #252525;
  --lima:     #C1FE1A;
  --papel:    #FDF8F2;
  --azul:     #0070FF;
  --morado:   #CE9AED;
  --rosa:     #FE01AC;
  --rojo:     #FC291E;
  --verde:    #00CB43;
  --gris:     #6b6b6b;
  --gris-sw:  #e6e2dc;
  --radio:    14px;
  --sombra:   0 1px 2px rgba(37,37,37,.06), 0 8px 24px rgba(37,37,37,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }

/* ---------- Estructura ---------- */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
  height: 68px;
  background: var(--tinta);
  color: var(--papel);
  position: sticky;
  top: 0;
  /* Por encima de todo lo que pinte el contenido (el calendario usa 30). */
  z-index: 100;
}

.cabecera .marca {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--papel);
}
.cabecera .marca span { color: var(--lima); }

/* En que marca se esta trabajando: siempre a la vista, para no publicar
   en la cuenta equivocada por descuido. */
.marca-activa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(253,248,242,.1);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem; font-weight: 600;
  color: var(--papel);
  white-space: nowrap;
}
.marca-activa .punto { width: 8px; height: 8px; border-radius: 50%; }

.cabecera nav { display: flex; gap: .35rem; margin-left: auto; align-items: center; }

.cabecera nav a {
  color: rgba(253,248,242,.72);
  text-decoration: none;
  padding: .45rem .85rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: .93rem;
}
.cabecera nav a:hover  { color: var(--papel); background: rgba(253,248,242,.08); }
.cabecera nav a.activo { color: var(--tinta); background: var(--lima); font-weight: 700; }

.contenido {
  /* A ancho completo: el texto usa la ventana, no una columna estrecha. */
  width: 100%;
  padding: 2rem clamp(1.5rem, 4vw, 3.5rem) 4rem;
  /* Sin contexto de apilamiento propio: si lo tuviera, cualquier capa suya
     (el calendario, un menu) competiria con la cabecera y la taparia. */
  position: relative;
}

h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 2.4rem 0 .9rem; }
.sub { color: var(--gris); margin: 0 0 1.8rem; }

/* ---------- Tarjetas ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.tarjeta {
  background: #fff;
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}

/* La letra decorativa de fondo, en vez de la banda lateral de color. */
.tarjeta .marca-fondo {
  position: absolute;
  right: -.35rem;
  bottom: -2.2rem;
  font-size: 7rem;
  font-weight: 900;
  font-style: italic;
  opacity: .07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.tarjeta h3 { margin: 0 0 .2rem; font-size: 1rem; letter-spacing: -.01em; }
.tarjeta p  { margin: 0; color: var(--gris); font-size: .9rem; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(37,37,37,.06);
  backdrop-filter: blur(6px);
}
.etiqueta.ok      { background: rgba(0,203,67,.13);  color: #067a2c; }
/* La etiqueta roja comparte el nombre "aviso" con las cajas de aviso de
   mas abajo, que van despues en la hoja y le pasaban su relleno, su margen
   y su tamano de letra: "Caducada" o "sin contrasena" salian como una caja
   grande en vez de como una pastilla. Se le devuelven los suyos. */
.etiqueta.aviso   { background: rgba(252,41,30,.12); color: #b3160d;
                    padding: .2rem .6rem; margin: 0; font-size: .75rem; border-radius: 999px; }
.etiqueta.neutra  { background: rgba(37,37,37,.07);  color: var(--gris); }

/* ---------- Formularios ---------- */

label { display: block; font-weight: 600; margin: 0 0 .35rem; font-size: .9rem; }

input[type=text], input[type=email], input[type=password],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--gris-sw);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--tinta);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: transparent;
}

/* Casilla de aceptar la privacidad: la caja y su texto en la misma línea, y el texto también marca. */
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .88rem; line-height: 1.45; margin: 0 0 1.4rem; cursor: pointer; }
.casilla input { width: 1.1rem; height: 1.1rem; margin: .12rem 0 0; flex: none; accent-color: var(--tinta); }
.casilla a { color: inherit; text-decoration: underline; }

textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tinta);
  color: var(--papel);
  border: 0;
  border-radius: 10px;
  padding: .7rem 1.3rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { opacity: .88; }
.boton.lima  { background: var(--lima); color: var(--tinta); }
.boton.suave { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--gris-sw); }
.boton.chico { padding: .4rem .8rem; font-size: .85rem; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Selector de redes ---------- */

.redes-elegir { display: flex; flex-wrap: wrap; gap: .6rem; }

.red-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--gris-sw);
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  user-select: none;
}
.red-chip input { position: absolute; opacity: 0; pointer-events: none; }
.red-chip .punto { width: 9px; height: 9px; border-radius: 50%; }
.red-chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tinta); background: rgba(193,254,26,.16); }
.red-chip:has(input:disabled) { opacity: .4; cursor: not-allowed; }

/* ---------- Avisos ---------- */

.aviso {
  padding: .85rem 1.1rem;
  border-radius: 10px;
  margin: 0 0 1.4rem;
  font-size: .93rem;
}
.aviso.error { background: rgba(252,41,30,.09);  color: #9e130b; }
.aviso.bien  { background: rgba(0,203,67,.11);   color: #06682a; }
.aviso.info  { background: rgba(0,112,255,.08);  color: #024ba8; }

/* ---------- Tablas ---------- */

/* El envoltorio de una tabla necesita un TOPE de ancho, no solo permitir
   el desplazamiento. Sin el tope crece con la tabla que lleva dentro, y
   entonces se sale de la pantalla arrastrando la pagina entera: en un
   movil de 390 px, la tabla de personas medía 563 y "Marcas" y "Ajustes"
   se desplazaban de lado. Con el tope, quien se desplaza es la tabla
   dentro de su caja, que es lo que se buscaba.
   Se mide en % del contenedor, nunca en "vw", porque el ancho de ventana
   incluye la barra de desplazamiento y saca la caja unos pixeles. */
.tabla-envuelta {
  overflow-x: auto;
  max-width: 100%;
  /* En un movil, el desplazamiento lateral tiene que notarse que existe. */
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--gris-sw);
}
td { padding: .75rem; border-bottom: 1px solid var(--gris-sw); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

/* ---------- Acceso ---------- */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.acceso .caja {
  background: #fff;
  padding: 2.5rem;
  border-radius: 18px;
  box-shadow: var(--sombra);
  width: min(420px, 100%);
}
.acceso .caja h1 { margin-bottom: 1.8rem; }

.pie {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gris-sw);
  color: var(--gris);
  font-size: .85rem;
}

/* ------------------------------------------------------------------
   PANTALLAS ESTRECHAS

   La hoja no tenia ni una sola regla para movil, asi que el menu de
   arriba (ocho enlaces en fila) medía 638 px dentro de una pantalla de
   390 y se salia por la derecha en las SEIS pantallas del panel. Los
   ultimos enlaces, "Ajustes" y "Salir", quedaban fuera y no habia forma
   de pulsarlos sin arrastrar la pagina de lado.

   Se arregla dejando que el menu pase a varias lineas y centrandolo,
   que es lo que espera cualquiera en un movil.
   ------------------------------------------------------------------ */

@media (max-width: 780px) {
  /* La altura fija de 68 px no dejaba sitio a la segunda linea del menu:
     los enlaces se salian por debajo de la barra y quedaban pintados
     encima del contenido. Aqui la barra crece con lo que lleva. */
  .cabecera {
    flex-wrap: wrap;
    gap: .6rem;
    height: auto;
    padding-top: .8rem;
    padding-bottom: .8rem;
  }

  /* El menu baja a su propia linea y ocupa el ancho entero, en vez de
     intentar caber al lado del logo. */
  .cabecera nav {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
  }

  .cabecera nav a {
    padding: .4rem .6rem;
    font-size: .88rem;
  }

  .contenido { padding-top: 1.4rem; }

  /* Las tablas anchas se desplazan dentro de su caja, no estiran la
     pagina entera. */
  .tabla-envuelta { overflow-x: auto; }
}

@media (max-width: 480px) {
  /* Las rejillas de tarjetas a una sola columna: dos columnas en un
     movil dejan cada tarjeta demasiado estrecha para leerse. */
  .rejilla { grid-template-columns: 1fr !important; }
}