/* /Components/Shared/Avisos.razor.rz.scp.css */
/* Pila de avisos ARRIBA Y CENTRADA. Abajo a la derecha se perdían: justo ahí
   es donde está el botón que acabas de pulsar, y la vista se queda en él.
   Va por encima de todo menos de la pantalla superpuesta de vinculación
   (que usa z-index 100). */
.avisos[b-jrq7s5bpnn] {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: min(560px, calc(100vw - 32px));
    pointer-events: none;
}

.aviso[b-jrq7s5bpnn] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    background: var(--pl-panel);
    box-shadow: 0 10px 30px rgba(31, 41, 55, .16);
    pointer-events: auto;
    animation: aviso-entra-b-jrq7s5bpnn .22s ease-out;
}

/* Franja de color a la izquierda: de un vistazo se sabe si fue bien o mal
   sin llegar a leer el texto. */
.aviso[b-jrq7s5bpnn]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    background: currentColor;
    opacity: .9;
}

.aviso[b-jrq7s5bpnn] { position: relative; overflow: hidden; }

@keyframes aviso-entra-b-jrq7s5bpnn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso[b-jrq7s5bpnn] { animation: none; }
}

.aviso.ok[b-jrq7s5bpnn]    { border-color: rgba(21, 128, 61, .35); background: #f0fdf4; color: #166534; }
.aviso.error[b-jrq7s5bpnn] { border-color: #f2c4c5; background: #fdf2f2; color: #a3282c; }

.icono[b-jrq7s5bpnn] { flex: 0 0 18px; }
.icono svg[b-jrq7s5bpnn] { width: 18px; height: 18px; display: block; }

.texto[b-jrq7s5bpnn] { flex: 1; overflow-wrap: anywhere; }

.cerrar[b-jrq7s5bpnn] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0 2px;
    margin: -2px -4px 0 0;
    color: inherit;
    opacity: .55;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.cerrar:hover[b-jrq7s5bpnn] { opacity: 1; }

@media (max-width: 700px) {
    .avisos[b-jrq7s5bpnn] { left: 14px; right: 14px; align-items: stretch; }
    .aviso[b-jrq7s5bpnn] { max-width: none; }
}
/* /Components/Shared/CampoFechaHora.razor.rz.scp.css */
/* ============================================================================
   CampoFechaHora · CSS aislado (Blazor scoped)
   Usa las variables de wwwroot/panel.css y reutiliza .pl-btn para los botones
   del pie, así que aquí sólo se estila el marcado propio del componente.
   ============================================================================ */

.campo[b-cnkuvd6sx6] {
    display: block;
    margin-bottom: 12px;
}

.etiqueta[b-cnkuvd6sx6] {
    display: block;
    font-size: 11.5px;
    color: var(--pl-suave);
    margin-bottom: 5px;
    font-weight: 650;
}

/* El calendario va siempre a la vista, en línea: ya no es un desplegable, así que
   no hace falta ni posicionamiento absoluto ni z-index. */
.caja[b-cnkuvd6sx6] {
    max-width: 340px;
    padding: 10px;
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde);
    border-radius: var(--pl-radio);
}

/* ----------------------------------------------------------------------- Atajos */

.atajos[b-cnkuvd6sx6] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--pl-borde);
}

.atajo[b-cnkuvd6sx6] {
    padding: 4px 9px;
    border: 1px solid var(--pl-borde-alto);
    border-radius: 999px;
    background: var(--pl-panel);
    color: var(--pl-suave);
    font-size: 11.5px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.atajo:hover[b-cnkuvd6sx6] {
    background: var(--pl-marca-suave);
    border-color: rgba(51, 78, 104, .45);
    color: var(--pl-marca);
}

.atajo--hora[b-cnkuvd6sx6] {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- Calendario */

.cabecera-mes[b-cnkuvd6sx6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.mes[b-cnkuvd6sx6] {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.nav[b-cnkuvd6sx6] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--pl-borde);
    border-radius: 8px;
    background: var(--pl-panel);
    color: var(--pl-texto);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.nav:hover:not(:disabled)[b-cnkuvd6sx6] {
    background: var(--pl-panel-alto);
    border-color: var(--pl-borde-alto);
}

.nav:disabled[b-cnkuvd6sx6] {
    opacity: .35;
    cursor: not-allowed;
}

.nav svg[b-cnkuvd6sx6] {
    width: 14px;
    height: 14px;
}

.semana[b-cnkuvd6sx6] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.semana span[b-cnkuvd6sx6] {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--pl-suave);
}

.rejilla[b-cnkuvd6sx6] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dia[b-cnkuvd6sx6] {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--pl-texto);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.dia:hover:not(:disabled)[b-cnkuvd6sx6] {
    background: var(--pl-panel-alto);
}

/* Días del mes anterior o siguiente: presentes para no descuadrar la rejilla,
   pero visualmente en segundo plano. */
.dia--fuera[b-cnkuvd6sx6] {
    color: #b3bdc8;
}

.dia--hoy[b-cnkuvd6sx6] {
    border-color: var(--pl-borde-alto);
}

.dia--elegido[b-cnkuvd6sx6],
.dia--elegido:hover:not(:disabled)[b-cnkuvd6sx6] {
    background: var(--pl-marca);
    border-color: var(--pl-marca);
    color: #fff;
}

.dia:disabled[b-cnkuvd6sx6] {
    color: #c7d0d9;
    cursor: not-allowed;
    background: transparent;
}

.dia:focus-visible[b-cnkuvd6sx6] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 78, 104, .35);
}

/* ------------------------------------------------------------------------- Hora */

.hora[b-cnkuvd6sx6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 10px;
    background: var(--pl-panel-alto);
    border: 1px solid var(--pl-borde);
    border-radius: 10px;
}

.hora__titulo[b-cnkuvd6sx6] {
    flex: 1;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
    color: var(--pl-suave);
}

.dospuntos[b-cnkuvd6sx6] {
    font-weight: 700;
    color: var(--pl-suave);
}

/* Hora y minuto con botones +/−: más cómodo que las listas larguísimas del
   selector nativo, y el campo central sigue admitiendo un valor exacto. */
.contador[b-cnkuvd6sx6] {
    display: inline-flex;
    align-items: center;
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde-alto);
    border-radius: 8px;
    overflow: hidden;
}

.paso[b-cnkuvd6sx6] {
    width: 24px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--pl-suave);
    font-size: 15px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.paso:hover[b-cnkuvd6sx6] {
    background: var(--pl-marca-suave);
    color: var(--pl-marca);
}

.numero[b-cnkuvd6sx6] {
    width: 34px;
    height: 28px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--pl-borde);
    border-right: 1px solid var(--pl-borde);
    background: transparent;
    color: var(--pl-texto);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.numero[b-cnkuvd6sx6]::-webkit-outer-spin-button,
.numero[b-cnkuvd6sx6]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.numero:focus[b-cnkuvd6sx6] {
    outline: none;
    background: var(--pl-marca-suave);
}

/* -------------------------------------------------------------------- Resumen */

.pie[b-cnkuvd6sx6] {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--pl-borde);
}

.resumen[b-cnkuvd6sx6] {
    display: block;
    font-size: 11.5px;
    color: var(--pl-suave);
}

.resumen--error[b-cnkuvd6sx6] {
    color: var(--pl-rojo);
    font-weight: 650;
}
/* /Components/Shared/CampoTelefono.razor.rz.scp.css */
/* ============================================================================
   CampoTelefono · CSS aislado
   Sólo lo específico del componente: .pl-campo, .pl-input y .pl-btn siguen
   viviendo (y mandando) en wwwroot/panel.css.
   ============================================================================ */

.campo[b-zxax47r3fd] {
    display: block;
    margin-bottom: 12px;
}

.etiqueta[b-zxax47r3fd] {
    display: block;
    font-size: 11.5px;
    color: var(--pl-suave);
    margin-bottom: 5px;
    font-weight: 650;
}

.fila[b-zxax47r3fd] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Ancho fijo para que el desplegable no se estire con el nombre del país. */
.pais[b-zxax47r3fd] {
    flex: 0 0 auto;
    width: 210px;
    min-width: 150px;
    max-width: 100%;
    cursor: pointer;
    background: var(--pl-panel);
}

.numero[b-zxax47r3fd] {
    position: relative;
    flex: 1 1 180px;
    min-width: 160px;
    display: flex;
    align-items: center;
}

/* El prefijo va dentro del input, en gris, como texto fijo no editable. */
.prefijo[b-zxax47r3fd] {
    position: absolute;
    left: 11px;
    font-size: 13px;
    font-weight: 650;
    color: var(--pl-suave);
    pointer-events: none;
}

.entrada[b-zxax47r3fd] {
    padding-left: 54px;
    padding-right: 32px;
    letter-spacing: .4px;
}

.entrada.ok[b-zxax47r3fd] {
    border-color: var(--pl-verde);
}

.entrada.mal[b-zxax47r3fd] {
    border-color: var(--pl-rojo);
}

.entrada.mal:focus[b-zxax47r3fd] {
    border-color: var(--pl-rojo);
    box-shadow: 0 0 0 3px rgba(209, 52, 56, .15);
}

.check[b-zxax47r3fd] {
    position: absolute;
    right: 10px;
    width: 15px;
    height: 15px;
    color: var(--pl-verde);
    pointer-events: none;
}

.mensaje[b-zxax47r3fd] {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--pl-suave);
    min-height: 15px;
}

.mensaje--ok[b-zxax47r3fd] {
    color: var(--pl-verde);
    font-weight: 600;
}

.mensaje--mal[b-zxax47r3fd] {
    color: var(--pl-rojo);
    font-weight: 600;
}

@media (max-width: 560px) {
    .pais[b-zxax47r3fd] { width: 100%; flex: 1 1 100%; }
}
/* /Components/Shared/CampoTexto.razor.rz.scp.css */
/* ============================================================================
   CampoTexto · CSS aislado (Blazor scoped)
   Usa las variables de wwwroot/panel.css. Sólo estila marcado propio del
   componente, así que no hay riesgo de tocar nada de las páginas.
   ============================================================================ */

.campo[b-jeb5s3wqoq] {
    display: block;
    margin-bottom: 12px;
}

.etiqueta[b-jeb5s3wqoq] {
    display: block;
    font-size: 11.5px;
    color: var(--pl-suave);
    margin-bottom: 5px;
    font-weight: 650;
}

/* Contenedor relativo: ancla del botón y del popover. */
.caja[b-jeb5s3wqoq] {
    position: relative;
}

.texto[b-jeb5s3wqoq] {
    /* Hueco a la derecha para que el texto no pase por debajo del botón. */
    padding-right: 42px;
}

/* ------------------------------------------------------------ Botón de emojis */

.disparador[b-jeb5s3wqoq] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--pl-borde);
    border-radius: 8px;
    background: var(--pl-panel);
    color: var(--pl-texto);
    transition: background .15s, border-color .15s;
}

.disparador:hover[b-jeb5s3wqoq] {
    background: var(--pl-panel-alto);
    border-color: var(--pl-borde-alto);
}

.disparador--activo[b-jeb5s3wqoq] {
    background: var(--pl-marca-suave);
    border-color: var(--pl-marca);
}

.disparador:focus-visible[b-jeb5s3wqoq] {
    outline: none;
    border-color: var(--pl-marca);
    box-shadow: 0 0 0 3px rgba(51, 78, 104, .18);
}

/* ------------------------------------------------------------------- Popover */

.popover[b-jeb5s3wqoq] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: min(320px, calc(100vw - 32px));
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde);
    border-radius: var(--pl-radio);
    box-shadow: var(--pl-sombra), 0 12px 30px rgba(31, 41, 55, .12);
    overflow: hidden;
}

/* Pestañas de categoría */
.pestanas[b-jeb5s3wqoq] {
    display: flex;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--pl-borde);
    background: var(--pl-panel-alto);
    overflow-x: auto;
}

.pestana[b-jeb5s3wqoq] {
    flex: 0 0 auto;
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    transition: background .12s, border-color .12s;
}

.pestana:hover[b-jeb5s3wqoq] {
    background: var(--pl-panel);
    border-color: var(--pl-borde);
}

.pestana--activa[b-jeb5s3wqoq] {
    background: var(--pl-marca-suave);
    border-color: rgba(51, 78, 104, .45);
}

.titulo-categoria[b-jeb5s3wqoq] {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 700;
    color: var(--pl-suave);
}

/* Rejilla de emojis con scroll vertical */
.rejilla[b-jeb5s3wqoq] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 2px 8px 10px;
    max-height: 240px;
    overflow-y: auto;
}

.emoji[b-jeb5s3wqoq] {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 7px;
    transition: background .1s, transform .1s;
}

.emoji:hover[b-jeb5s3wqoq] {
    background: var(--pl-marca-suave);
    transform: scale(1.14);
}

.emoji:focus-visible[b-jeb5s3wqoq] {
    outline: none;
    background: var(--pl-marca-suave);
    box-shadow: 0 0 0 2px rgba(51, 78, 104, .35);
}

/* --------------------------------------------------------------- Pie/contador */

.pie[b-jeb5s3wqoq] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.contador[b-jeb5s3wqoq] {
    font-size: 11px;
    color: var(--pl-suave);
}