/* assets/admin/css/pages/admin.css
   Especifico del modulo de administrador de OPOSICIONES. Todo lo demas
   (cabecera, tablas, buscador, formularios, modales, toasts...) viene tal
   cual de los componentes de ALPHA_CLOUD. Aqui solo van los ajustes propios
   de estas pantallas, siempre con los tokens de base.css. */

/* El administrador trabaja copiando datos de las tablas (referencias,
   CIF, correos...): se permite seleccionar texto, a diferencia del bloqueo
   por defecto de base.css. */
body { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

/* Logo de color (logo_opositas.png) sobre fondo claro en el login. */
.admin-logo-claro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-sm) var(--app-space-md);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    border: 1px solid var(--app-border-soft);
    box-shadow: var(--app-shadow-soft);
}
.admin-logo-claro img { max-width: 180px; max-height: 60px; object-fit: contain; }

.auth-form input[aria-invalid="true"] { border-color: var(--app-danger); background: var(--app-danger-soft); }

.admin-footer-enlace { color: var(--app-on-primary); text-decoration: underline; }

/* ---------- Tablas ---------- */
.admin-col-seleccion { width: 1%; }
.admin-col-seleccion input,
.admin-seleccion-todas {
    width: 16px;
    height: 16px;
    accent-color: var(--app-primary);
    cursor: pointer;
}
.app-tabla tbody tr { cursor: pointer; }
.app-tabla tbody tr.admin-fila-seleccionada { background: rgba(var(--app-primary-rgb), 0.10); }
.app-tabla tbody tr.admin-fila-seleccionada:hover { background: rgba(var(--app-primary-rgb), 0.14); }
.app-tabla td img { max-width: 80px; height: auto; border-radius: var(--app-radius-xs); vertical-align: middle; }

.admin-seleccion-info { margin-top: var(--app-space-xs); }

.app-tabla-acciones .app-button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Modales ---------- */
.admin-modal-ayuda { margin-bottom: var(--app-space-md); font-size: var(--app-text-sm); }
.app-modal .app-form-group { max-width: none; }
.app-form-group input[type="file"] { padding: var(--app-space-sm) var(--app-space-md); cursor: pointer; }

/* ---------- Fichas ---------- */
.admin-ficha-portada { display: flex; justify-content: center; margin-bottom: var(--app-space-lg); }
.admin-ficha-portada img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-soft);
}
.admin-ficha-texto { color: var(--app-text-soft); font-size: var(--app-text-md); line-height: 1.6; }
.admin-ficha-texto p { margin-bottom: var(--app-space-sm); }
.admin-sin-separador { margin-top: 0; padding-top: 0; border-top: 0; }

/* .app-defs usa 140px fijos de etiqueta: en movil se apila. */
.app-defs { grid-template-columns: 1fr; }
.app-defs dd { margin-bottom: var(--app-space-xs); word-break: break-word; }
@media (min-width: 481px) {
    .app-defs { grid-template-columns: 140px 1fr; }
    .app-defs dd { margin-bottom: 0; }
}

/* ---------- Texto legal ---------- */
.admin-texto-legal h2 { font-size: var(--app-text-xl); }
.admin-texto-legal h3 { margin: var(--app-space-sm) 0; font-size: var(--app-text-lg); color: var(--app-text); }
.admin-texto-legal p { margin-bottom: var(--app-space-sm); }
.admin-texto-legal hr { margin: var(--app-space-lg) 0; border: 0; border-top: 1px solid var(--app-border-soft); }

/* ---------- Formularios del catalogo (validacion en el campo) ---------- */
.admin-campo-ayuda { font-size: var(--app-text-xs); color: var(--app-text-muted); line-height: 1.4; }
.admin-campo-error { font-size: var(--app-text-xs); font-weight: 700; color: var(--app-danger); line-height: 1.4; }
.app-form-group [aria-invalid="true"] { border-color: var(--app-danger); background: var(--app-danger-soft); }
.app-form-acciones > a.app-button { flex: 1 1 0; min-width: 180px; }

/* ---------- Importacion CSV guiada ---------- */
.app-modal.admin-modal-ancho { max-width: min(1100px, 100%); }
.app-modal.admin-modal-noticia-amplio {
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--app-space-xl) * 2);
    height: calc(100dvh - var(--app-space-xl) * 2);
    max-height: calc(100dvh - var(--app-space-xl) * 2);
    border-radius: var(--app-radius-lg);
}
.admin-importacion-pasos { margin: 0 0 var(--app-space-md); padding-left: var(--app-space-lg); color: var(--app-text-soft); font-size: var(--app-text-sm); line-height: 1.6; }
.admin-importacion-guia {
    margin-bottom: var(--app-space-md);
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
}
.admin-importacion-guia summary { padding: var(--app-space-sm) var(--app-space-md); font-size: var(--app-text-sm); font-weight: 700; cursor: pointer; }
.admin-importacion-guia .app-tabla-wrap { max-height: calc(40vh / var(--app-escala-compacta)); }
.admin-importacion-guia .app-tabla td { white-space: normal; }
.admin-importacion-fichero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--app-space-md); margin-bottom: var(--app-space-md); }
.admin-importacion-fichero .app-form-group { flex: 1 1 260px; margin-bottom: 0; }
.admin-importacion-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-sm); margin-bottom: var(--app-space-sm); }
.admin-importacion-errores { max-height: calc(45vh / var(--app-escala-compacta)); }
.admin-importacion-errores .app-tabla td { white-space: normal; vertical-align: top; }
.admin-importacion-errores .app-tabla tbody tr { cursor: default; }
.admin-importacion-celda {
    width: 100%;
    min-width: 160px;
    min-height: 34px;
    padding: var(--app-space-xs) var(--app-space-sm);
    border: 1px solid var(--app-danger);
    border-radius: var(--app-radius-xs);
    background: var(--app-danger-soft);
    color: var(--app-text);
    font-size: var(--app-text-sm);
}
.alert ul { margin: var(--app-space-xs) 0 0; padding-left: var(--app-space-lg); font-weight: 600; }

/* ---------- Ficheros: boton nativo con el estilo de la app (CSV y similares) ---------- */
input[type="file"]::file-selector-button {
    margin-right: var(--app-space-md);
    padding: var(--app-space-xs) var(--app-space-md);
    border: 1.5px solid var(--app-primary);
    border-radius: var(--app-radius-sm);
    background: rgba(var(--app-primary-rgb), 0.06);
    color: var(--app-primary-dark);
    font-family: inherit;
    font-size: var(--app-text-sm);
    font-weight: 600;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: rgba(var(--app-primary-rgb), 0.14); }

/* ---------- Selector de imagen (selector-imagen.js) ---------- */
.admin-selector-imagen { display: grid; gap: var(--app-space-sm); }
.admin-selector-etiqueta { font-size: var(--app-text-sm); color: var(--app-text-soft); font-weight: 700; }
.admin-selector-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.admin-selector-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-sm);
    padding: var(--app-space-lg) var(--app-space-md);
    border: 2px dashed rgba(var(--app-primary-rgb), 0.35);
    border-radius: var(--app-radius-md);
    background: rgba(var(--app-primary-rgb), 0.03);
    color: var(--app-text-soft);
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}
.admin-selector-zona.admin-selector-arrastrando { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), 0.10); }
.admin-selector-icono { color: var(--app-primary); }
.admin-selector-texto { font-size: var(--app-text-sm); font-weight: 600; }
.admin-selector-limites { font-size: var(--app-text-xs); color: var(--app-text-muted); line-height: 1.5; }
.admin-selector-info { margin: 0; font-size: var(--app-text-sm); font-weight: 600; }
.admin-selector-acciones,
.admin-selector-aceptada { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-sm); }

/* ---------- Vistas previas ---------- */
/* Tipografia de titulos del portal publico (style.css), solo dentro de la vista previa. */
@font-face {
    font-family: 'opos_vista_previa_titulo';
    src: url('../../../rsc/fonts/Montserrat-Bold.ttf') format('truetype');
    font-display: swap;
}
.admin-subida-rejilla { display: grid; grid-template-columns: 1fr; gap: var(--app-space-lg); }
@media (min-width: 901px) {
    .admin-subida-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}
.admin-subida-campos .app-form-group { max-width: none; }
.admin-preview-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-sm); margin-bottom: var(--app-space-sm); font-size: var(--app-text-sm); }
.admin-preview-lienzo { display: flex; justify-content: center; padding: var(--app-space-sm); border-radius: var(--app-radius-md); background: var(--app-surface-soft); border: 1px solid var(--app-border-soft); }
.admin-preview-marco {
    position: relative;
    width: 100%;
    min-height: calc(var(--app-space-xxl) * 2);
    overflow: hidden;
    border-radius: var(--app-radius-xs);
    background: var(--app-bg);
    box-shadow: var(--app-shadow-soft);
    container-type: inline-size;
}
.admin-preview-marco[data-modo="movil"] { width: min(100%, calc(var(--app-space-xxl) * 5)); }
.admin-preview-marco img { display: block; width: 100%; height: auto; }
.admin-preview-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--app-space-xxl) * 2);
    padding: var(--app-space-md);
    color: var(--app-text-muted);
    font-size: var(--app-text-sm);
    text-align: center;
}
/* Mismas posiciones que .carousel-caption del portal (style_secciones.css). Tamaños
   en cqw = proporcionales al ancho del marco (1366 px de referencia en escritorio,
   375 px en movil), para que se vea en la misma escala que la portada real. */
.admin-preview-caption {
    position: absolute;
    left: 5%;
    top: 50%;
    width: 50%;
    transform: translateY(-50%);
    color: var(--app-primary);
    text-align: left;
    pointer-events: none;
}
.admin-preview-caption h2 { margin: 0 0 0.4em; font-family: 'opos_vista_previa_titulo', 'titillium', Arial, sans-serif; font-weight: normal; font-size: 2.11cqw; line-height: 1.2; }
.admin-preview-caption p { margin: 0; color: inherit; font-size: 1.64cqw; line-height: 1.4; }
.admin-preview-marco[data-modo="movil"] .admin-preview-caption h2 { font-size: 5.12cqw; }
.admin-preview-marco[data-modo="movil"] .admin-preview-caption p { display: none; }
.admin-preview-marco img[hidden] ~ .admin-preview-caption { display: none; }
.admin-preview-ejemplo { opacity: .55; }

/* Icono del asociado sobre la barra del portal (degradado blanco -> marca, alto 70 px). */
.admin-preview-icono { display: grid; gap: var(--app-space-xs); }
.admin-preview-icono-barra {
    display: flex;
    align-items: center;
    height: calc(var(--app-space-xxl) + var(--app-space-md));
    padding-left: var(--app-space-md);
    border-radius: var(--app-radius-xs);
    background: linear-gradient(to right, var(--app-surface), var(--app-primary));
    box-shadow: var(--app-shadow-soft);
}
.admin-preview-icono-barra img { height: var(--app-space-xxl); width: auto; max-width: 60%; object-fit: contain; }

/* Tarjeta del listado de Noticias (.listado_blog .contenedor_noticia del portal). */
.admin-preview-noticia {
    width: min(100%, calc(var(--app-space-xxl) * 6));
    margin: 0 auto var(--app-space-md);
    padding: var(--app-space-md);
    border-radius: var(--app-radius-xs);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}
.admin-preview-noticia-img img { display: block; width: 100%; height: auto; }
.admin-preview-noticia h3 { margin: var(--app-space-sm) 0 0; font-size: var(--app-text-md); font-weight: 700; color: var(--app-text); }
.admin-preview-noticia-fecha { margin: var(--app-space-sm) 0 0; font-size: var(--app-text-xs); color: var(--app-text-muted); }
.admin-preview-noticia-texto { height: calc(var(--app-space-xxl) * 2.7); overflow: hidden; margin-top: var(--app-space-xs); font-size: var(--app-text-xs); color: var(--app-text); text-align: justify; }

/* HTML del contenido dentro de las vistas previas de Noticias (imita los estilos
   del portal: .listado_blog .contenedor_noticia y .noticia_blog). */
.admin-preview-html p { margin: 0 0 var(--app-space-sm); color: inherit; line-height: 1.5; }
.admin-preview-html ul,
.admin-preview-html ol { margin: 0 0 var(--app-space-sm); padding-left: var(--app-space-lg); }
.admin-preview-html ul li { list-style-type: disc; }
.admin-preview-html hr { margin: var(--app-space-sm) 0; border: 0; border-top: 1px solid var(--app-border); }
.admin-preview-html img { max-width: 100%; height: auto; }
.admin-preview-html a { color: var(--app-primary-dark); text-decoration: underline; }
/* Tarjeta: en el portal los titulos del extracto heredan el h1 de la tarjeta (mismo tamaño, negrita). */
.admin-preview-noticia-texto h1,
.admin-preview-noticia-texto h3 { margin: var(--app-space-xs) 0; font-size: var(--app-text-sm); font-weight: 700; color: var(--app-text); }

/* Noticia completa (.noticia_blog del portal): titulo centrado y titulos en color de marca. */
.admin-preview-detalle { padding: var(--app-space-md); border-radius: var(--app-radius-xs); background: var(--app-surface); box-shadow: var(--app-shadow-soft); text-align: justify; font-size: var(--app-text-sm); color: var(--app-text); }
.admin-preview-detalle > h1 { margin: 0 0 var(--app-space-xs); text-align: center; font-size: var(--app-text-2xl); color: var(--app-primary); }
.admin-preview-detalle > .admin-preview-noticia-fecha { margin-bottom: var(--app-space-md); text-align: center; }
.admin-preview-detalle h1,
.admin-preview-detalle h2,
.admin-preview-detalle h3,
.admin-preview-detalle h4,
.admin-preview-detalle h5,
.admin-preview-detalle h6 { color: var(--app-primary); text-align: left; }
.admin-preview-detalle div h1 { font-size: var(--app-text-xl); margin: var(--app-space-sm) 0; }
.admin-preview-detalle div h2,
.admin-preview-detalle div h3 { font-size: var(--app-text-lg); margin: var(--app-space-sm) 0; }
.admin-preview-detalle div img { display: block; width: 70%; margin: 0 auto var(--app-space-md); }