:root {
  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --tinta: #0b0b0c;
  --suave: #5f646c;
  --borde: #dcdfe4;
  --acento: #16a34a;
  --acento-suave: #e7f6ec;
  --aviso: #b45309;
  --aviso-suave: #fef3e2;
  --error: #b42318;
  --error-suave: #fdecea;
  --radio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1012;
    --superficie: #17191c;
    --tinta: #f2f3f5;
    --suave: #a0a6ae;
    --borde: #2b2f35;
    --acento: #4ade80;
    --acento-suave: #12301d;
    --aviso: #fbbf24;
    --aviso-suave: #3a2a0c;
    --error: #f87171;
    --error-suave: #3b1414;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 0; }
h3 { font-size: .95rem; margin: 1.6rem 0 .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
a { color: inherit; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

.marca { margin: 0; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.marca__logo { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 7px; background: #0b0b0c; color: #4ade80; font-size: .95rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.nota, .ayuda { color: var(--suave); font-size: .88rem; margin: .25rem 0 0; }
.error { color: var(--error); background: var(--error-suave); border-radius: 8px; padding: .6rem .8rem; margin: .8rem 0 0; font-size: .92rem; }
.aviso p { margin: 0; }
.acciones-aviso { display: flex; justify-content: flex-end; margin-top: .6rem !important; }
.aviso { background: var(--aviso-suave); border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0 0; font-size: .92rem; }

label { display: block; font-weight: 600; font-size: .88rem; margin: 1rem 0 .35rem; }
input:not([type=radio]):not([type=checkbox]) { width: 100%; padding: .65rem .75rem; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--tinta); font: inherit; }
input:focus-visible, button:focus-visible, .zona:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
input:invalid:not(:placeholder-shown) { border-color: var(--error); }

.boton { border: 1px solid transparent; border-radius: 9px; padding: .6rem 1rem; font: inherit; font-weight: 600; cursor: pointer; background: none; color: inherit; }
.boton--primario { background: var(--tinta); color: var(--fondo); }
.boton--fantasma { border-color: var(--borde); background: var(--superficie); }
.boton--peligro { color: var(--error); border-color: var(--borde); background: var(--superficie); }
.boton--chico { padding: .35rem .7rem; font-size: .85rem; }
.boton:disabled { opacity: .5; cursor: progress; }

/* Entrada */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar__form { width: min(360px, 100%); padding: 1.8rem; }
.entrar__form .boton { width: 100%; margin-top: 1.4rem; }

/* Lista de sitios */
.barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.2rem; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; }
.barra__acciones { display: flex; gap: .5rem; }
.contenedor { max-width: 960px; margin: 0 auto; padding: 1.6rem 16px 4rem; }
.encabezado { display: flex; justify-content: space-between; align-items: center; }
#s-buscar { margin-top: 1rem; }
.lista { display: grid; gap: .7rem; margin-top: 1rem; }
.sitio { padding: 1rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; }
.sitio__nombre { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sitio__dirs { color: var(--suave); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; grid-column: 1; }
.sitio__acciones { grid-row: 1 / span 2; grid-column: 2; }
.etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 99px; border: 1px solid var(--borde); color: var(--suave); }
.estado { font-size: .8rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px; }
.estado--ok { background: var(--acento-suave); color: var(--acento); }
.estado--espera { background: var(--aviso-suave); color: var(--aviso); }
.estado--mal { background: var(--error-suave); color: var(--error); }
.vacio { padding: 2.5rem 1rem; text-align: center; }

/* Diálogos */
.dialogo { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); background: var(--superficie); color: var(--tinta); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.dialogo::backdrop { background: rgba(10, 12, 16, .45); }
.dialogo__cuerpo { padding: 1.4rem 1.5rem 1.5rem; }
.dialogo__cabeza { display: flex; justify-content: space-between; align-items: center; }
.dialogo__pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.4rem; }
.cerrar { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--suave); padding: .2rem .4rem; }

.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: 1rem 0 0; cursor: pointer; }
.casilla input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--acento); }
.casilla small { font-weight: 400; color: var(--suave); }
.opciones { border: 0; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.opciones legend { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; padding: 0; }
.opcion { margin: 0; font-weight: 400; display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .8rem; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion small { color: var(--suave); }

.zona { border: 2px dashed var(--borde); border-radius: var(--radio); padding: 1.2rem; text-align: center; cursor: pointer; }
.zona p { margin: .2rem 0; }
.zona--encima { border-color: var(--acento); background: var(--acento-suave); }
.resumen { margin-top: .6rem; font-size: .9rem; border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .9rem; }
.resumen ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.progreso { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem; }
.progreso li { display: flex; gap: .6rem; align-items: center; }
.progreso li::before { content: "○"; width: 1.2rem; text-align: center; color: var(--suave); }
.progreso li.hecho::before { content: "✓"; color: var(--acento); font-weight: 700; }
.progreso li.activo::before { content: "◌"; color: var(--aviso); animation: girar 1s linear infinite; }
.progreso li.fallo::before { content: "✕"; color: var(--error); font-weight: 700; }
@keyframes girar { to { transform: rotate(360deg); } }

table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--suave); font-weight: 600; font-size: .8rem; }
.copiable { display: inline-flex; gap: .4rem; align-items: center; }
.enlaces { display: grid; gap: .25rem; margin-top: .6rem; font-size: .92rem; }
.en-linea { display: flex; gap: .5rem; margin-top: .7rem; }
.en-linea input { flex: 1; }
.plan { margin-top: .8rem; border: 1px solid var(--borde); border-radius: 10px; padding: .8rem 1rem; font-size: .9rem; }
.plan p { margin: .2rem 0; }
.plan details { margin: .3rem 0; }
.plan summary { cursor: pointer; }
.plan ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; max-height: 10rem; overflow: auto; }
.plan .quitar { color: var(--error); }
.fila-usuario { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.fila-usuario div { display: flex; gap: .4rem; }

@media (max-width: 560px) {
  .barra { flex-wrap: wrap; }
  .opciones { grid-template-columns: 1fr; }
  .sitio { grid-template-columns: 1fr; }
  .sitio__acciones { grid-row: auto; grid-column: 1; }
}