/* =====================================================================================================
   Estilos de las vistas que antes iban en línea (style="...") o en bloques <style> dentro de cada vista.
   Se carga la ÚLTIMA en _Layout y _AdminLayout (después de bootstrap.min.css): un estilo en línea ganaba a
   cualquier regla de las hojas, y al pasarlo a una clase debe seguir ganando a las que ya había. Por eso las
   reglas de celdas de la rejilla de listados van con #tGridSistemas: igualan la especificidad de las reglas de
   SCPStyle.css/responsive.css que afectan a esas celdas.
   No incluye los estilos de vistas que también se convierten a PDF (_FichaPdf, _FichaTecnicaContenido,
   _TablaCaracteristicas): iText no carga las hojas del sitio, así que esos siguen incrustados en la vista.
   Tampoco el display:none inicial de lo que muestra/oculta JavaScript leyendo o reponiendo style.display
   (p. ej. fila.style.display !== 'none' en Proyectos/Index, o style.display = '' en _SelectorProyectoDestino):
   con la ocultación en una clase, poner style.display = '' ya no lo mostraría. Lo que nunca se muestra usa el
   atributo hidden.
   ===================================================================================================== */

/* ---- Estructura de página (tablas de maquetación heredadas del legado) ---- */
.tabla-pagina {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
}

.celda-titulo { height: 70px; }
.celda-mensaje { height: 35px; width: 100%; }
.celda-botones { height: 35px; }

/* Anchos fijos de columnas/celdas, mismos valores que tenía cada style="width:..." */
.ancho-20 { width: 20px; }
.ancho-24 { width: 24px; }
.ancho-63 { width: 63px; }
.ancho-70 { width: 70px; }
.ancho-73 { width: 73px; }
.ancho-76 { width: 76px; }
.ancho-80 { width: 80px; }
.ancho-84 { width: 84px; }
.ancho-90 { width: 90px; }
.ancho-45 { width: 45px; }
.ancho-50 { width: 50px; }
.ancho-120 { width: 120px; }
.ancho-200 { width: 200px; }
.ancho-210 { width: 210px; }
.ancho-300 { width: 300px; }
.ancho-600 { width: 600px; }
.ancho-800 { width: 800px; }
.ancho-25 { width: 25%; }
.ancho-33 { width: 33%; }
.ancho-65 { width: 65%; }
.ancho-completo { width: 100%; }

/* Altos fijos de filas/celdas */
.alto-20 { height: 20px; }
.alto-25 { height: 25px; }
.alto-30 { height: 30px; }
.alto-31 { height: 31px; }
.alto-40 { height: 40px; }
.alto-50 { height: 50px; }

/* Utilidades de texto */
.texto-centrado { text-align: center; }
.celda-centrada { text-align: center; }
.fila-centrada { text-align: center; }
.sin-margen { margin: 0; }
.icono-16 { width: 16px; height: 16px; }
.icono-centrado { display: block; margin: auto; }
.enlace-inactivo { cursor: default; }

/* ---- Botonera de ficha y presupuesto (Imprimir, desplegables, Añadir a proyecto...) ---- */
/* Con "a": iguala a las reglas de SCPStyle.css del tipo ".c-botonera a.btn-detail". */
.c-botonera a.btn-barra { margin-bottom: 6px; height: 30px; }
.c-btncontainer { position: relative; }

/* ---- Listados de sistemas (Tabiques, Techos, Trasdosados, Fachadas...) ---- */
.titulo-seleccion { margin-top: 20px; }

/* Aviso flotante (muro base / forjado tipo): oculto hasta MostrarVentana(), que pone display:block en línea. */
.aviso-flotante {
    z-index: 40;
    display: none;
}

/* Filtros: fila de deslizadores de rango */
.sc-filter-row { padding-bottom: 10px; }
.tabla-sliders { padding-right: 10px; }
.slider-col-inicio { padding-right: 10px; }
.slider-col-centro { padding-right: 10px; padding-left: 10px; }
.slider-col-fin { padding-left: 10px; }
.slider-label { text-align: center; }
.slider-marco { padding-top: 5%; padding-bottom: 5%; }

.slider-legend-row .slider-legend {
    background: transparent;
    color: #6f6f6f;
    font-weight: bold;
    width: 30px;
    font-size: 7.5pt;
    text-align: center;
}

/* Filtros: carruseles de desplegables. Cada fila de carrusel queda por encima de la siguiente para que la
   lista abierta de un desplegable no quede tapada por la fila de abajo. */
.capa-1 { z-index: 1; }
.capa-2 { z-index: 2; }
.capa-3 { z-index: 3; }
/* Con .sp--col-filters: debe ganar a ".sp--col-filters .col-item { width: 186px }" (SCPStyle.css). */
.sp--col-filters .selector-ancho { width: 382px; }
.sp--col-filters .selector-medio { width: 235.5px; }

/* Selector de forjado tipo (Techos) y de muro base (Trasdosados), a la derecha del título */
.selector-forjado { width: 31%; float: right; margin: 7px; }
.selector-muro-base { width: 33%; float: right; margin: 14px; }

/* Resultados */
.mensaje-sin-resultados {
    font-family: verdana;
    font-size: 8pt;
    color: #FFA400;
    font-weight: bold;
}

.listado-scroll {
    width: 100%;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#tGridSistemas .cabecera-texto { text-align: left; }
/* Hueco de la barra de desplazamiento del cuerpo en la cabecera */
#tGridSistemas .celda-hueco-scroll { width: 17px; padding: 0; }
#tGridSistemas .celda-dato { text-align: center; vertical-align: middle; }
#tGridSistemas .celda-texto { text-align: left; vertical-align: middle; }

.p-buttons { padding-top: 5px; }

/* ---- Formularios: Registro, Mi cuenta, Proyecto (alta/edición) y Solicitud de certificado ---- */
/* Cada campo muestra su propio error justo debajo (asp-validation-for) y el campo se resalta en rojo. */
.registroErrorResumen {
    color: #a94442;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 6px;
    padding: 10px 15px;
    margin: 10px 0;
    max-width: 700px;
}

.registroErrorResumen ul { margin: 5px 0 0 20px; padding: 0; }

/* El span de error va dentro del mismo contenedor flex-column que el campo (registroCampoValor), así que un
   margin-left igual al del propio campo (5%, el hueco que separa la etiqueta del campo) alinea el mensaje con el
   borde izquierdo del campo, y al ser un hermano por debajo queda bajo el borde inferior, no encima. */
.campoError {
    display: block;
    font-size: 12px;
    margin: 4px 0 8px 5%;
    color: #dc3545;
}

.registroCampoValor { display: flex; flex-direction: column; }

.registroCajaParticular.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.registroGeneral textarea.registroCajaParticular { height: 70px; resize: vertical; }

/* Mi cuenta: .miCuentaEtiquetaBorrado y .miCuentaBotonBorrado traen un margin-right/margin-left calibrado para el
   contenedor .edicionMiCuenta de la página original (con su propio margin-left:25%); aquí se reutiliza
   .registroGeneral (centrado por flexbox), así que ese margen queda descentrado — se neutraliza sin tocar
   color/tipografía/tamaño, que sí son los mismos que en producción. */
.miCuentaEtiquetaBorrado { margin-right: 0; }
#miCuentaModalBorrado .miCuentaBotonBorrado { margin-left: 8px; margin-right: 8px; }

/* Solicitud de certificado. Estructura propia en vez de .registroColumna/.registroColumnahijo (SCPStyle.css):
   esas clases reparten el ancho de cada columna según el contenido de sus etiquetas (width:25% contra un
   contenedor de ancho indefinido), así que con etiquetas de longitud distinta entre columnas (p.ej.
   "Instalador*" vs "Obra*") salían columnas desiguales, pegadas entre sí, y cada bloque del formulario terminaba
   con un margen izquierdo distinto. Aquí todo cuelga de un único contenedor del mismo ancho. */
.certificadoFormulario { max-width: 950px; margin: 20px auto 0; text-align: left; }
.certificadoFormulario .campoError { margin: 4px 0 0; }

.certificadoInfoPrevia { margin-bottom: 20px; }
.certificadoInfoFila { display: flex; align-items: baseline; margin-bottom: 6px; font-weight: normal; }
.certificadoInfoEtiqueta { font-family: 'Montserrat', sans-serif; color: #78be21; font-weight: normal; width: 180px; flex-shrink: 0; }

/* grid-template-columns con los 9 campos en orden de lectura (Instalador, Obra, Dirección, Localidad...) coloca
   el 1º a la izquierda, el 2º a la derecha, el 3º de nuevo a la izquierda, etc.: no hace falta repartir a mano
   qué campo va en cada columna, el grid les da el mismo ancho y un hueco real entre ambas. */
.certificadoCampos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6%; row-gap: 14px; margin-bottom: 15px; }
.certificadoCampo { display: flex; align-items: center; }
.certificadoCampo label { font-family: 'Montserrat', sans-serif; color: #78be21; font-size: 14px; width: 100px; flex-shrink: 0; }
.certificadoCampo .registroCampoValor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.certificadoCampo .registroCajaParticular { width: 100%; margin: 0; height: 32px; }

.certificadoCamposInfo { font-size: 12px; color: gray; font-weight: bold; margin-bottom: 12px; }

.certificadoCheckClasificacion { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.certificadoCheckClasificacion input { margin-top: 4px; flex-shrink: 0; }
.certificadoCheckClasificacion label { font-size: 12px; color: #757575; }

.certificadoBoton { text-align: center; }
.certificadoBoton input[type=submit] { width: auto; min-width: 240px; padding: 0 20px; }

/* ---- Presupuesto ---- */
.presupuesto-pagina { padding-top: 15px; }
.presupuesto-cabecera { height: 22px; width: 100%; }
.presupuesto-celda-imagen { text-align: left; width: auto; }
.presupuesto-imagen { width: 70%; }
.presupuesto-celda-parametros { width: auto; }

/* Contenedor tFiltros del original (presupuesto-sistema.aspx): se pinta SIEMPRE, también en Fachadas, donde la tabla
   de parámetros queda sin filas pero sigue ocupando su margin-left + min-width:300px, que es lo que limita el ancho
   de la 1ª columna (imagen al 70% y desplegable de variantes). */
.presupuesto-filtros { border-color: #BBBDBC; width: 130%; margin-left: -30%; }
.presupuesto-celda-filtros { height: auto; display: grid; justify-content: end; align-content: center; padding: 20px 0; }

/* Tabla de parámetros (tParametros del original): borde gris #BBBDBC, no el verde de .tablaDetalle. En Fachadas
   queda vacía: sin borde, para que no se vea como una línea gris suelta, pero conservando su ancho. */
.presupuesto-parametros { position: relative; min-width: 300px; border-color: #BBBDBC; }
.presupuesto-parametros.sin-borde { border-style: none; }
/* .textoValor centra el texto, pero es un <span> (inline): hace falta en el <td> que lo contiene. */
#tablaCaracteristicas .celdaTabla { text-align: center; }

.presupuesto-celda-configuracion { padding-top: 25px; }
.presupuesto-caja-porcentaje { width: 50px; }
.presupuesto-caja-linea { width: 45px; }

/* Rendimiento de materiales. Anchos del original (CODIGO 75/CANTIDAD POR m² 60 -> 50px; CANTIDAD TOTAL/IMPORTE
   TOTAL OBRA 80px) en el <colgroup>; MATERIAL ocupa el resto. Cabeceras centradas; CODIGO/MATERIAL a la
   izquierda; Desperdicio/Dto. centradas; el resto a la derecha. El texto DENTRO de las cajas de Desperdicio/Dto.
   queda a la derecha por .textoMoneda, igual que txtDesperdicio/txtDescuento en presupuesto-sistema.aspx. */
#tablaRendimiento .gridHeader td { text-align: center; }
#tablaRendimiento td { text-align: right; }
#tablaRendimiento td.celda-codigo,
#tablaRendimiento td.celda-material { text-align: left; }
#tablaRendimiento td.celda-desperdicio,
#tablaRendimiento td.celda-descuento { text-align: center; }

/* Casillas numéricas (desperdicio, descuento, mano de obra, otros costes, superficie): type="number" pero sin las
   flechas de subir/bajar del navegador — en el legado eran cajas de texto (asp:TextBox) y aquí desalineaban los
   valores. */
input[type=number].textoMoneda::-webkit-outer-spin-button,
input[type=number].textoMoneda::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].textoMoneda {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Cajas de costes y de presupuesto en obra */
.presupuesto-caja-costes {
    background-color: #E8EDE9;
    border-color: #004710;
    border-style: solid;
    border-width: 1px;
    width: 100%;
}

.presupuesto-celda-concepto { padding-right: 5px; }
.presupuesto-celda-unidad { padding-left: 5px; }
.presupuesto-celda-otros { padding-left: 10px; }
.presupuesto-caja-importe { width: 100px; }
.presupuesto-caja-concepto { width: 99%; text-align: right; }
.presupuesto-importe { font-size: 12pt; }
.presupuesto-importe-total { font-weight: bold; }
.presupuesto-celda-mensajes { padding-top: 10px; }
.presupuesto-celda-botonera { padding-top: 20px; }

/* Panel "Guardar cambios en la línea" (edición de una línea ya guardada de un proyecto) */
/* span.: en móvil responsive.css pone span.etiquetaTitulo a inline-block, que ganaba a la clase sola. */
span.titulo-ventana-centrado { display: block; text-align: center; }
.presupuesto-form-linea { margin-top: 10px; }
.botones-centrados { margin-top: 10px; text-align: center; }
.presupuesto-boton-cancelar { margin-left: 10px; }

/* ---- Proyectos ---- */
.registro-cabecera { margin-top: 1%; }
.registro-casilla-arriba { align-items: flex-start; }
.proyecto-imagen-actual { max-width: 120px; margin-top: 6px; }
.proyecto-miniatura { max-width: 45px; max-height: 45px; }

/* Mismo contenedor de ancho fijo que el resto de la app (Presupuesto, etc.) — 996px centrados, no el 100% del
   contenedor flexible de .registroGeneral. La tabla de proyectos es Width="100%" de ESE contenedor (grdProyectos
   en el original); la de sistemas dentro del panel es 97% (grdSistemasProyectos). */
.proyectosSeccion { width: 996px; margin: 0 auto; }
.proyectosTabla { width: 100%; margin: 20px 0; border-collapse: collapse; }
.proyectosTabla td { padding: 6px 8px; }
.proyectosAcciones { text-align: center; }
.proyectosAcciones form { display: inline; }
.proyectosAcciones button { background: none; border: none; padding: 0; cursor: pointer; }
.proyectosAcciones img, .proyectosIconoDetalle { width: 16px; height: 16px; }
.proyectosVacio { text-align: center; color: #757575; margin: 40px 0; }
.proyectosIconoDetalle { cursor: pointer; }
.proyectosFilaDetalle > td { background: #F7F9F5; padding: 15px 20px; }
.proyectosSubtitulo { font-weight: bold; color: #333; text-align: center; margin: 0 0 8px; }
.proyectos-subtitulo-pendientes { text-align: left; margin-top: 20px; }
.proyectos-tabla-pendientes { margin-top: 5px; }
.proyectosMasDatos table { width: 100%; margin-bottom: 15px; }
.proyectosTablaSistemas { width: 100%; margin: 10px 0; border-collapse: collapse; }
.proyectosTablaSistemas td { padding: 8px 10px; }
.proyectosDescripcion { text-align: left !important; vertical-align: middle !important; }
.proyectosCodigo form { display: inline-flex; align-items: center; gap: 4px; }
.proyectosCodigo input { width: 70px; font-size: 11px; height: 22px; box-sizing: border-box; padding: 0 4px; margin: 0; }

/* .buttonGreen reducido al tamaño compacto que necesita una celda de tabla (igual que el 8pt en línea del botón
   equivalente en producción). Gris hasta que el usuario cambia el código; verde mientras hay un cambio sin
   guardar; vuelve a gris al recargar tras guardar. */
.proyectosBotonCodigo {
    height: 22px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 4px;
    background-color: #9c9c9c;
    transition: background-color .15s;
}

.proyectosBotonCodigo.proyectosCodigoModificado { background-color: #78be21; }
.proyectosDragHandle { width: 24px; }
/* Aceptar/Rechazar de las invitaciones pendientes: mismo tamaño compacto que .proyectosBotonCodigo. */
.proyectosBotonPendiente { height: 26px; padding: 0 12px; font-size: 11px; border-radius: 4px; display: inline-flex; align-items: center; }
.proyectosAcciones button.proyectosBotonPendiente { background-color: #78be21; color: #fff; padding: 0 12px; cursor: pointer; }
.proyectosAcciones button.proyectosBotonRechazar { background-color: #ccc; color: #000; }

/* La marca pide fondo blanco en todas las filas (sin alternar color), en la tabla de proyectos y en la de sistemas
   de cada proyecto; .gridAlternatingRow no trae fondo y dejaba ver el gris de detrás. El resaltado al pasar el
   ratón (.drag-handle:hover, !important) se mantiene. */
.proyectosTabla > tbody > tr.gridRow, .proyectosTabla > tbody > tr.gridAlternatingRow,
.proyectosTablaSistemas tr.gridRow, .proyectosTablaSistemas tr.gridAlternatingRow { background-color: #fff; }

/* ---- Ventanas emergentes (enviar y compartir proyecto, añadir a proyecto) ---- */
.ventana-ancha { width: 900px; max-width: 100%; }
.ventana-estrecha { width: 500px; max-width: 100%; }
.ventana-anadir-proyecto { max-width: 400px; margin: 0 auto; text-align: left; }
.ventana-titulo { text-align: center; color: #78be21; font-size: 22px; font-weight: bold; margin-bottom: 2%; }
.ventana-subtitulo { text-align: center; color: #757575; }
.ventana-botones { display: flex; justify-content: center; gap: 10px; }
.boton-cancelar { background-color: lightgrey; }

/* Enviar proyecto */
.enviar-documentos { display: flex; position: relative; margin-top: 15px; }
.enviar-materiales { right: 0; position: absolute; }
.enviar-sostenibilidad { margin-top: 5%; }
.enviar-sostenibilidad-titulo { display: flex; align-items: center; gap: 10px; }
.etiqueta-documento { font-size: 14px; color: darkgray; }
.etiqueta-documento-compacta { line-height: 1.2; }
.etiqueta-documento-negrita { font-weight: bold; }
.enviar-botones { margin-top: 5%; text-align: center; }

/* Compartir proyecto */
.compartir-formulario { display: flex; flex-direction: column; align-items: center; padding: 10px 20px; }
.compartir-etiqueta { display: block; margin-bottom: 5px; }
.compartir-email { width: 80%; }
.compartir-mensaje { min-height: 20px; margin-top: 8px; }
.compartir-error { font-size: 9pt; font-weight: bold; }
/* Sobre .container de bootstrap: el margen propio sustituye a su margin auto. */
.compartir-botones { margin: 10px 0 5%; }

/* Selector de proyecto destino (paso 1: proyecto existente; paso 2: datos de la obra) */
.selector-botones { margin: 5% 0; }
.caja-descripcion { height: 70px; }
.nota-campos { font-size: 8pt; color: gray; font-weight: bold; }
.nota-campos-primera { margin-top: 10px; }

/* .registroCajaParticular (SCPStyle.css) está pensada para un formulario de registro apilado en columna, con
   márgenes en % que quedan irregulares dentro de una tabla de celdas de ancho variable como "Datos de la obra":
   se ajustan solo para este selector, sin tocar la clase compartida. */
#panelProyectoNuevo .registroCajaParticular,
#panelProyectoNuevo select.select {
    margin: 3px 0;
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
}

#panelProyectoNuevo table {
    width: 100%;
    border-collapse: collapse;
}

#panelProyectoNuevo .celdaTitulo:first-child {
    text-align: left;
    padding-right: 10px;
    white-space: nowrap;
    width: 1%;
}

/* .registroTituloParticular (compartida con Mi cuenta) trae padding-top:5% + margin-top:.5em, que aquí dejaban un
   hueco blanco grande sobre el título. Y su color verde: el título va en negro (revisión cliente). */
#pasoSeleccionarProyecto .registroTituloParticular {
    padding-top: 0;
    margin-top: 0;
    color: #000;
}

/* Verde corporativo: la regla del legado ".ventanaEmergente .buttonCrearProyecto" (SCPStyle.css) no aplica porque
   modal-remoto.js monta el modal con .ventanaEmergenteAncha, sin .ventanaEmergente. */
#pasoSeleccionarProyecto .buttonCrearProyecto {
    color: #78BE21;
    font-weight: bold;
    text-decoration: none;
}

#pasoSeleccionarProyecto select.select {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
}