/*
Theme Name: Colpraz
Theme URI: https://colpraz.devwebsite.es
Author: Gustavo
Author URI: https://devwebsite.es
Description: Una plantilla completamente en blanco y limpia para empezar a desarrollar.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-tema-en-blanco
*/

:root {
    --color-principal: #f38312;
    --color-principal-claro: #fbe6cf;
    --color-fondo: #fafafa;
    --color-blanco: #ffffff;
    --color-texto-oscuro: #333333;
    --color-texto-mutado: #9e9e9e;
    --color-texto-tachado: #a0a0a0;
    --color-verde-fondo: #f0fbf6;
    --color-verde-texto: #10b981;
    --color-borde: #f0f0f0;
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --radio-borde-lg: 24px;
    --radio-borde-md: 16px;
    --radio-borde-sm: 12px;
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.04);
    --color-green: #0a6b56;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto-oscuro);
    /*display: flex;*/
    justify-content: center;
    justify-items: center;
}

.text-principal {
    color: var(--color-principal)!important;
}

.contenedor-aplicacion {
  width: 100%;
  max-width: 650px;
  background-color: var(--color-blanco);
  /*border-radius: var(--radio-borde-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);*/
  position: relative;
  justify-content: center;
  align-items: center;
}

.encabezado {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.encabezado-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.logotipo-seccion {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icono-bolsa {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    padding: 8px 12px;
    border-radius: var(--radio-borde-sm);
    font-size: 18px;
    font-weight: bold;
}

.nombre-app {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
}

.usuario-estatus {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.badge-carrito {
    background-color: #fff5eb;
    color: var(--color-principal);
    padding: 6px 14px;
    border-radius: var(--radio-borde-md);
    font-weight: bold;
    font-size: 14px;
}

.avatar-usuario {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-principal);
    border: 2px solid var(--color-blanco);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    object-fit: cover;
}

.avatar-texto {
    width: 40px;
    height: 40px;
    background-color: var(--color-green);
    color: var(--color-blanco);
    border-radius: 50%;
    border: 2px solid var(--color-blanco);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    
    /* Propiedades clave para centrar perfectamente la inicial */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Estilo del texto */
    font-family: var(--fuente-principal);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase; /* Asegura que siempre salga en mayúscula */
    user-select: none;         /* Evita que el usuario seleccione la letra por error */
}

.punto-conectado {
    width: 10px;
    height: 10px;
    background-color: #10b981;
    border: 2px solid var(--color-blanco);
    border-radius: 50%;
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.barra-busqueda-contenedor {
    display: flex;
    gap: 10px;
    /*margin-bottom: 15px;*/
}

.campo-buscar {
    flex: 1;
    padding: 10px 10px;
    border: 0;
    /*border: 1px solid var(--color-borde);    
    background-color: #fcfcfc;
    border-radius: var(--radio-borde-md);*/
    font-size: 15px;
    outline: none;
}

.boton-anadir {
    width: 52px;
    height: 52px;
    background-color: var(--color-principal-claro);
    color: var(--color-principal);
    border: none;
    border-radius: var(--radio-borde-md);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seccion-lista {
    padding: 0 10px;
    margin-bottom: 30px;
}

.titulo-lista {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-mutado);
    font-weight: 700;
    margin-bottom: 15px;
}

.tarjeta-producto {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-md);
    padding: 5px 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra-suave);
}

/* Estado deshabilitado con opacidad */
.tarjeta-producto.cargando {
    position: relative; /* Esencial para que el spinner se posicione respecto a la tarjeta */
    pointer-events: none; /* Evita que el usuario haga clicks mientras carga */
}

/* Aplicamos la opacidad a los elementos internos, excepto al spinner */
.tarjeta-producto.cargando > *:not(.spinner-contenedor) {
    opacity: 0.4; /* Suaviza el contenido de fondo */
    filter: blur(0.5px); /* Opcional: un mini desenfoque para dar más sensación de bloqueo */
}

/* Contenedor del Spinner: Lo centra perfectamente en el div */
.tarjeta-producto .spinner-contenedor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Asegura que quede por encima de todo */
}

.bloque-izquierdo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.control-seleccion {
    width: 32px;
    height: 32px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.nombre-producto {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-texto-oscuro);
    margin-bottom: 2px;
}

.tiempo-registro {
    font-size: 13px;
    color: var(--color-texto-mutado);
}

.tarjeta-producto.en-cesta {
    background-color: #f9f9f9;
    border-color: transparent;
    box-shadow: none;
}

.tarjeta-producto.en-cesta .control-seleccion {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
}

.tarjeta-producto.en-cesta .control-seleccion::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tarjeta-producto.en-cesta .nombre-producto {
    color: var(--color-texto-tachado);
    text-decoration: line-through;
}

.panel-inferior {
    background-color: var(--color-blanco);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.08);
    
    /* 🌟 PROPIEDADES CLAVE PARA FIJARLO ABAJO */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centra el panel horizontalmente */
    
    width: 95%;
    max-width: 600px; /* Se acopla al ancho de tu contenedor de app */
    z-index: 999;     /* Se posiciona por encima de cualquier otro elemento */
    
    /* Suaviza el cambio de bordes cuando se abre/cierra */
    border-radius: var(--radio-borde-lg) var(--radio-borde-lg) 0 0;
    overflow: hidden; 
}

.barra-accion-principal {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Eliminamos el border-radius de aquí para que lo herede 
       limpiamente del contenedor .panel-inferior */
}

.contenido-detallado-panel {
    padding: 24px;
    overflow: hidden;
    background-color: var(--color-blanco);
}

.bloque-accion-izq {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icono-carrito-accion {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: var(--radio-borde-sm);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-accion {
    font-size: 18px;
    font-weight: 700;
}

.subtitulo-accion {
    font-size: 13px;
    opacity: 0.9;
}

.flecha-desplegable {
    font-size: 16px;
    transform: rotate(180deg);
}

.seccion-progreso {
    margin-bottom: 24px;
}

.cabecera-progreso {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.etiqueta-progreso {
    color: var(--color-texto-mutado);
}

.porcentaje-progreso {
    color: var(--color-principal);
    font-weight: 700;
}

.barra-progreso-fondo {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.barra-progreso-relleno {
    height: 100%;
    background-color: var(--color-principal);
    width: 50%;
    border-radius: 4px;
}

/* Contenedor padre que divide la fila en 2 columnas */
.contenedor-progreso-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Espacio de separación entre el progreso y el botón */
    margin-bottom: 24px; /* Sustituye el margin de tu antigua sección-progreso */
}

/* Columna Izquierda toma todo el espacio disponible */
.columna-progreso {
    flex: 1;
}

.cabecera-progreso {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.etiqueta-progreso {
    /*color: var(--color-texto-mutado);*/
}

.porcentaje-progreso {
    color: var(--color-principal);
    font-weight: 700;
}

.barra-progreso-fondo {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.barra-progreso-relleno {
    height: 100%;
    background-color: var(--color-principal);
    width: 50%;
    border-radius: 4px;
}

/* Columna Derecha y Estilos del Botón */
.columna-boton {
    display: flex;
    align-items: center;
}

.boton-finalizar-accion {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    padding: 12px 20px;
    font-family: var(--fuente-principal);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radio-borde-sm);
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
    box-shadow: 0 4px 10px rgba(243, 131, 18, 0.2); /* Sombra suave con tu color principal */
    transition: transform 0.2s ease, background-color 0.2s ease;
    width: 100%;
}

/* Efecto opcional al pasar el ratón por encima */
.boton-finalizar-accion:hover {
    background-color: #e27507; /* Un tono un pelín más oscuro para el hover */
    transform: translateY(-1px);
}

.boton-finalizar-accion:active {
    transform: translateY(0);
}

.boton-cancelar-accion {
    background-color: #6b7280; /* Gris neutro elegante (estilo Tailwind gray-500) */
    color: var(--color-blanco);
    border: none;
    padding: 12px 20px;
    font-family: var(--fuente-principal);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radio-borde-sm);
    cursor: pointer;
    white-space: nowrap; 
    box-shadow: 0 4px 10px rgba(107, 114, 128, 0.2); /* Sombra suave usando el mismo gris */
    transition: transform 0.2s ease, background-color 0.2s ease;
    width: 100%;
}

/* Efecto al pasar el ratón por encima (Hover) */
.boton-cancelar-accion:hover {
    background-color: #4b5563; /* Gris un pelín más oscuro para el hover (gray-600) */
    transform: translateY(-1px);
}

/* Efecto al hacer click (Active) */
.boton-cancelar-accion:active {
    transform: translateY(0);
}

.bloques-resumen-contenedor {
    display: flex;
    gap: 14px;
    margin-bottom: 25px;
}

.tarjeta-resumen {
    flex: 1;
    border-radius: var(--radio-borde-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tarjeta-resumen.mes {
    background-color: #fdfaf7;
    border: 1px solid #f9ece0;
}

.tarjeta-resumen.productos {
    background-color: var(--color-verde-fondo);
    border: 1px solid #e1f5ec;
}

.encabezado-tarjeta-resumen {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tarjeta-resumen.mes .encabezado-tarjeta-resumen {
    color: #c27830;
}

.tarjeta-resumen.productos .encabezado-tarjeta-resumen {
    color: var(--color-verde-texto);
}

.valor-resumen {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
}

/* El importe en formato grande y destacado */
.valor-total-resumen {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-green);
}

.subtexto-resumen {
    font-size: 12px;
    color: var(--color-texto-mutado);
}

.tarjeta-resumen.productos .subtexto-resumen {
    color: var(--color-verde-texto);
    font-weight: 500;
}

.seccion-participantes {
    margin-top: 15px;
}

.titulo-participantes {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-mutado);
    font-weight: 700;
    margin-bottom: 15px;
}

.fila-participante {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-borde);
}

.fila-participante:last-child {
    border-bottom: none;
}

.info-participante-izq {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nombre-participante {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-oscuro);
}

.cantidad-productos-participante {
    font-size: 12px;
    color: var(--color-texto-mutado);
    margin-top: 2px;
}

.tiempo-actividad-participante {
    font-size: 13px;
    color: var(--color-texto-mutado);
}

.div-agua {
  background: rgba(255, 255, 255, 0.15); /* fondo semitransparente */
  backdrop-filter: blur(20px) saturate(180%); /* desenfoque + saturación estilo iOS */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* soporte Safari/iOS */
  border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* sombra ligera */
}
.div-agua a {
  color: #f6e3d3!important;
}
.div-agua a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.pointer {
    cursor: pointer;
}
.mb-100 {
    margin-bottom: 100px;
}
.trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  color: #8c8c8c;
  cursor: pointer;
  
  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

/* --- MUNDO PC: Aparece al pasar el ratón --- */
.fila-item:hover .trash-btn {
  opacity: 1;
  visibility: visible;
}

/* --- MUNDO MÓVIL: Aparece cuando Angular añade la clase 'activo' --- */
.fila-item.activo .trash-btn {
  opacity: 1;
  visibility: visible;
}

/* Efecto feedback cuando se posan directamente sobre la papelera */
.trash-btn:hover, .trash-btn:active {
  background-color: #fee2e2;
  color: #dc2626;
}
.fila-item {
  outline: none;
}

/* Cambia el cursor únicamente cuando pases el ratón por encima de la foto/avatar */
.manejador-drag {
  cursor: grab;
  user-select: none; /* Evita que se seleccione texto al arrastrar */
}

.manejador-drag:active {
  cursor: grabbing; /* Cambia el cursor a un puño cerrado al mantener el click */
}

/* Animación fluida mientras se mueven los demás elementos para dejar espacio */
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* Animación de retorno si sueltas el elemento y vuelve a su sitio original */
.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

/* Estilo del "fantasma" (el clon transparente que se queda en la lista mientras arrastras) */
.cdk-drag-placeholder {
  opacity: 0.3;
}

/* Estilo de la tarjeta original mientras está flotando en el aire */
.cdk-drag-preview {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px;
}