/* Kuaderno — las pantallas de cuenta.

   Aparte del resto por la misma razón que resultado.css y apoderado.css: son
   pantallas nuevas, se van a iterar, y así se rediseñan enteras sin tocar nada
   más. */

/* El código de seis letras se dicta en voz alta y se escribe a dedo en un
   teléfono. Grande, espaciado y monoespaciado: leerlo mal es el primer momento
   de frustración posible con la app. */
.codigo-grande{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:28px;font-weight:700;letter-spacing:6px;text-align:center;text-transform:uppercase;
}
.codigo-muestra{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:40px;font-weight:800;letter-spacing:8px;
  color:var(--morado-osc);background:var(--morado-claro);
  padding:20px 12px;border-radius:var(--r);margin:16px 0 10px;
  user-select:all;   /* un toque largo lo selecciona entero */
}

/* El aviso de privacidad va legible y en la pantalla, no detrás de un link.
   "Consentimiento informado" quiere decir que se pueda leer sin irse a otra
   parte; si hubiera que esconderlo para que la pantalla se vea bien, el
   problema sería lo que guardamos, no el diseño. */
.aviso-legal{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
  padding:16px;margin:20px 0 4px;
}
.aviso-legal h3{margin:0 0 10px;font-size:15px}
.aviso-legal ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--tinta-2);line-height:1.55}
.aviso-legal li{margin-bottom:7px}
.aviso-legal strong,.aviso-legal b{color:var(--tinta)}

.acepto{
  display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--borde);font-size:13.5px;line-height:1.45;cursor:pointer;
}
.acepto input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--morado)}

/* width:auto es lo que faltaba: .secundaria nace con width:100% porque casi
   siempre es un botón de pantalla completa. Adentro de una fila no lo es, y sin
   esto el botón empujaba el nombre del aparato fuera de la tarjeta y quedaba
   una palabra por línea. */
.secundaria.chica{padding:8px 12px;font-size:13px;flex:none;width:auto}

/* La fila de un hijo reusa .fila-ramo del panel del apoderado, pero acá lleva un
   botón al final en vez de una nota. */
.ramos .fila-ramo .secundaria{margin-left:auto}

/* Rojo solo donde la acción es irreversible. Si el rojo se usa para cualquier
   acción secundaria deja de significar "cuidado" y pasa a significar nada. */
.peligroso{color:var(--rojo)}
button.principal.peligroso{background:var(--rojo);color:#fff;box-shadow:0 4px 14px rgba(192,38,38,.25)}

/* El selector de hijo va pegado arriba del panel, no flotando entre medio: es
   parte del encabezado de lo que se está mirando. */
.selector-hijo{margin:2px 0 16px}