/* ========================================================================== CooperApp · Estilo C «Bento» — pantalla: contraparte -------------------------------------------------------------------------- Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de una va en components.css. Prohibido escribir colores, radios o sombras literales: se consumen con var(--token) de tokens.css. `assets.html` carga las hojas de TODAS las pantallas en TODAS las páginas (no hay una hoja por ruta). Para que nada de aquí se filtre a las páginas internas de sede, todo selector que use un nombre de clase compartido con otra pantalla (`.pest`, `.icb`, `.btn`, `.checkbox-group`…) va prefijado con `.body--counterpart`, la clase que `base_counterpart.html` pone en el `` y que ninguna otra plantilla usa. Los nombres exclusivos de esta pantalla (prefijo `cp-`) no lo necesitan, pero lo llevan igualmente por consistencia. ========================================================================== */ /* ---- Objetivos táctiles ---------------------------------------------------- El portal se usa en terreno, a menudo desde el móvil y con conectividad mala: aquí el mínimo de 40px pesa más que en el resto de la aplicación, por encima del mínimo de 34px que usan los botones de icono en sede. */ .cab--contraparte .icb{width:40px;height:40px} .cab--contraparte .btn{min-height:40px} .body--counterpart .pest button{min-height:40px} .body--counterpart .checkbox-group label{min-height:40px;align-items:center} /* El texto de «Cerrar sesión» sobra en una cabecera ya apretada en móvil: se oculta visualmente con la misma técnica de `.solo-lectores` de base.css (no `display:none`, para que el botón conserve su nombre accesible, ya que el icono que lo acompaña es aria-hidden). */ @media (max-width:780px){ .cab--contraparte .btn-logout-text{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } } /* ========================================================================== CABECERA DEL PROYECTO (celda hero) ========================================================================== */ .cp-header{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:flex-start;gap:var(--esp-5)} .cp-header-main{flex:1;min-width:240px} .cp-header-title{margin-top:var(--esp-2)} .cp-header-meta{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-5); margin-top:var(--esp-3)} .cp-meta-item{display:inline-flex;align-items:center;gap:6px; font-size:var(--t-s);color:var(--texto-2)} .cp-meta-item i{color:var(--acento);font-size:var(--t-xs);width:14px;text-align:center} /* ========================================================================== PESTAÑAS Y PANEL ========================================================================== */ .cp-tab-panel{padding:var(--esp-5)} @media (max-width:780px){ .cp-tab-panel{padding:var(--esp-4)} } .cp-cargando{display:flex;align-items:center;justify-content:center;gap:var(--esp-2); padding:var(--esp-7) var(--esp-4);color:var(--texto-3);font-size:var(--t-s)} /* ========================================================================== FORMULARIO DE GASTO ========================================================================== */ /* Importe imputable: el dato que resume la sección de importes, destacado sobre el fondo tenue del acento. */ .cp-imputable{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-3); padding:var(--esp-3) var(--esp-4);background:var(--acento-suave); border-radius:var(--r-s);margin-top:var(--esp-3)} .cp-imputable-label{font-size:var(--t-s);color:var(--texto)} .cp-imputable-value{font-family:var(--mono);font-size:var(--t-l); font-weight:var(--peso-fuerte);color:var(--acento); font-variant-numeric:tabular-nums} /* El asterisco de obligatorio solo tiene color propio dentro de un `.form-group label` (components.css); en el pie de la ubicación va en el `` de un fieldset, con la clase `.form-section-title` encima. */ .body--counterpart .form-section-title abbr.obligatorio{ color:var(--mal);text-decoration:none;margin-left:2px; }