/* Estilos del portal sobre MatBlazor (Material Design). Sin Bootstrap. */
html, body { margin: 0; font-family: Roboto, "Segoe UI", sans-serif; color: rgba(0,0,0,.87); background: #fafafa; }
:root { --mdc-theme-primary: #13315c; --mdc-theme-secondary: #1f4e8c; --mdc-theme-on-primary: #fff; --pa-primario: #13315c; --pa-error: #b00020; --pa-ok: #1b7f3b; --pa-aviso: #8a6100; }

h1 { font-weight: 400; font-size: 2rem; margin: 0 0 16px; }
h2 { font-weight: 400; font-size: 1.4rem; margin: 24px 0 12px; }
h3 { font-weight: 400; font-size: 1.25rem; margin: 0 0 16px; }
h4 { font-weight: 500; font-size: 1.05rem; margin: 16px 0 8px; }
a { color: var(--pa-primario); }
hr { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 16px 0; }

/* Rejilla simple */
.pa-fila { display: flex; flex-wrap: wrap; gap: 24px; }
.pa-col { flex: 1 1 360px; max-width: 560px; min-width: 0; }
.pa-col-menu { flex: 0 0 240px; }
.pa-col-ancha { flex: 1 1 480px; min-width: 0; }

/* Tarjeta para agrupar formularios */
.pa-tarjeta { padding: 24px; margin-bottom: 24px; }

/* Campos: la etiqueta siempre arriba (sin JS de MDC no sube al escribir) */
.pa-campo { margin-bottom: 16px; }
.mdc-text-field.pa-campo-texto, .pa-campo .mdc-text-field { width: 100%; }
.pa-campo .mdc-floating-label, .pa-select .mdc-floating-label { transform: translateY(-106%) scale(.75); }
.pa-select select { border: 0; background: transparent; padding-top: 20px; height: 100%; font: inherit; }
.pa-campo .mdc-text-field--disabled { background: #f0f0f0; }

/* Botones */
.pa-ancho { width: 100%; }
.pa-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mdc-button.pa-peligro { color: var(--pa-error); }
.mdc-button--raised.pa-peligro, .mdc-button--unelevated.pa-peligro { background: var(--pa-error); color: #fff; }
.mdc-button--outlined.pa-peligro { border-color: var(--pa-error); }
a.mdc-button { text-decoration: none; }

/* Mensajes */
.pa-error { color: var(--pa-error); }
.validation-message, ul.pa-error, div.pa-error { font-size: .8rem; }
ul.pa-error { padding-left: 18px; }
.pa-nota { color: rgba(0,0,0,.6); font-size: .875rem; }
.pa-aviso { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; border-left: 4px solid; }
.pa-aviso p { margin: 4px 0; }
.pa-aviso-ok { background: #e8f5e9; border-color: var(--pa-ok); color: #0d4f22; }
.pa-aviso-error { background: #fdecea; border-color: var(--pa-error); color: #7a0016; }
.pa-aviso-alerta { background: #fff8e1; border-color: #f9a825; color: #5d4300; }
.pa-aviso-info { background: #e8eaf6; border-color: var(--pa-primario); color: #1a237e; }

/* Casillas */
.pa-check { margin: 4px 0 12px -10px; }

/* Tablas con el estilo de data table de Material */
.pa-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; margin-bottom: 24px; }
.pa-tabla th { text-align: left; font-weight: 500; font-size: .875rem; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.12); }
.pa-tabla td { padding: 8px 16px; border-bottom: 1px solid rgba(0,0,0,.08); font-size: .875rem; }
.pa-tabla tr:last-child td { border-bottom: 0; }
.pa-derecha { text-align: right; }

code.recovery-code { font-size: 1rem; background: #eee; padding: 2px 6px; border-radius: 3px; }
.mdc-nav-item-activo, .mdc-list-item.active { background: rgba(19,49,92,.08); color: var(--pa-primario); }

/* Tema ejecutivo: azul marino en lugar del morado de Material */
.mdc-top-app-bar { background-color: var(--mdc-theme-primary); }
.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { background-color: var(--mdc-theme-primary); }
.mdc-button:not(:disabled) { color: var(--mdc-theme-primary); }
.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { color: #fff; }
.mdc-text-field--focused .mdc-floating-label, .mdc-text-field .mdc-text-field__input { caret-color: var(--mdc-theme-primary); }
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: var(--mdc-theme-primary); }
.mdc-text-field .mdc-line-ripple::after { border-bottom-color: var(--mdc-theme-primary); }
.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background { background-color: var(--mdc-theme-primary) !important; border-color: var(--mdc-theme-primary) !important; }

/* Layout principal (MatAppBar + MatDrawer). Va aqui y no en MainLayout.razor.css porque el layout
   solo contiene componentes de MatBlazor y los estilos aislados no los alcanzan. */
.pa-contenedor { display: flex; height: calc(100vh - 64px); overflow: hidden; }
/* Sin interactividad MatBlazor no agrega mdc-drawer--open: se fuerza abierto y en el flujo normal */
.pa-contenedor > .mdc-drawer { display: flex; position: static; flex: 0 0 256px; height: 100%; border-right: 1px solid rgba(0,0,0,.12); background: #fff; }
.pa-contenedor > .mdc-drawer + .mdc-drawer-app-content, .pa-contenedor > .pa-contenido { margin-left: 0; }
.pa-contenido { flex: 1 1 auto; min-width: 0; padding: 24px; overflow: auto; }
.pa-logo { margin: 0 12px 0 4px; }
.pa-usuario { margin-right: 16px; font-size: .875rem; opacity: .9; }
.pa-item { margin-left: 12px; }
.pa-salir { padding: 8px; }
.mdc-drawer .mdc-list-item { color: inherit; text-decoration: none; }

/* Boton de menu (☰): oculta o muestra el drawer; ver wwwroot/js/menu.js */
.pa-menu-boton { color: #fff; background: none; border: 0; cursor: pointer; width: 48px; height: 48px; padding: 12px; border-radius: 50%; font-size: 24px; }
.pa-menu-boton:hover { background: rgba(255,255,255,.12); }
.pa-menu-cerrado > .mdc-drawer { display: none; }

/* Sin contorno de foco del navegador en los campos: el foco ya se marca con la linea inferior de Material */
.mdc-text-field, .mdc-text-field:focus, .mdc-text-field:focus-within,
.mdc-text-field__input:focus, .mdc-text-field__input:focus-visible,
.pa-select select:focus, .mdc-checkbox__native-control:focus { outline: none; box-shadow: none; }
/* Linea inferior visible al enfocar (MDC la anima con JS, que aqui no corre) */
.mdc-text-field:focus-within .mdc-line-ripple::after { transform: scaleX(1); opacity: 1; }
.mdc-text-field:focus-within .mdc-floating-label { color: var(--mdc-theme-primary); }

/* Sin el contorno de :focus-visible del navegador en todo el portal (etiquetas, enlaces, botones, menu) */
:focus-visible, label:focus-within, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none !important; }