/* =====================================================
   ESTILOS GENERALES DEL CARRITO
   Configuración de fuente, fondo y estructura base
===================================================== */
body {
    font-family: 'Segoe UI', sans-serif; /* Fuente moderna y legible */
    background-color: #f8fafc;           /* Fondo gris azulado muy tenue */
    margin: 0;                           /* Elimina márgenes por defecto */
}

/* Contenedor principal para centrar el contenido */
.carrito-container {
    max-width: 1000px;        /* Ancho máximo de la sección del carrito */
    margin: 40px auto;        /* Centrado horizontal y separación superior */
    padding: 0 20px;          /* Espacio lateral para pantallas pequeñas */
}

/* =====================================================
   TABLA DE PRODUCTOS (GRID DE DATOS)
   Estilo de la tabla principal de compra
===================================================== */
table {
    width: 100%;              /* Ocupa todo el ancho del contenedor */
    border-collapse: collapse; /* Elimina espacios entre bordes de celdas */
    background: white;         /* Fondo blanco para contraste */
    border-radius: 15px;      /* Bordes redondeados modernos */
    overflow: hidden;         /* Asegura que el contenido respete el redondeo */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Sombra suave de profundidad */
    margin-bottom: 30px;      /* Separación con los elementos inferiores */
}

/* Encabezado de la tabla (Cabecera) */
thead th {
    background-color: #2d5a4a; /* Verde oscuro corporativo */
    color: white;              /* Texto en blanco para legibilidad */
    padding: 20px;             /* Espaciado interno de las celdas */
    text-transform: uppercase; /* Texto en mayúsculas */
    font-size: 14px;           /* Tamaño de fuente compacto */
    letter-spacing: 1px;       /* Espaciado entre letras */
}

/* Celdas de la tabla (Cuerpo) */
td {
    padding: 15px;             /* Espaciado interno de los datos */
    text-align: center;        /* Alineación centrada del contenido */
    border-bottom: 1px solid #f1f5f9; /* Línea divisoria muy suave */
    color: #475569;            /* Texto en gris oscuro suave */
    vertical-align: middle;    /* Centrado vertical de textos e imágenes */
}

/* Estilo para las imágenes de los productos */
td img {
    width: 70px;               /* Tamaño fijo de ancho */
    height: 70px;              /* Tamaño fijo de alto */
    object-fit: cover;         /* Ajusta la imagen sin deformarla */
    border-radius: 10px;       /* Bordes redondeados en miniatura */
}

/* =====================================================
   RESUMEN DE PAGO (TOTAL)
   Sección destacada con el importe final
===================================================== */
.total-pago {
    text-align: center;        /* Centrado del importe */
    font-size: 24px;           /* Fuente grande para destacar */
    font-weight: 800;          /* Grosor de fuente extra negrita */
    color: #2d5a4a;            /* Texto en verde corporativo */
    margin: 20px 0;            /* Separación vertical */
}

/* =====================================================
   BOTONES DE ACCIÓN (ESTILOS UNIFICADOS)
   Clases específicas para la interacción del usuario
===================================================== */
.btn-delete, .btn-volver, .btn-vaciar, .btn-comprar {
    display: inline-block;     /* Permite aplicar anchos y márgenes */
    padding: 12px 20px;        /* Tamaño del botón */
    border-radius: 8px;        /* Bordes redondeados */
    text-decoration: none;     /* Quita el subrayado de los enlaces */
    font-weight: bold;         /* Texto en negrita */
    font-size: 14px;           /* Tamaño de fuente estándar */
    transition: 0.3s;          /* Animación suave para transiciones */
    border: none;              /* Sin bordes por defecto */
    cursor: pointer;           /* Cursor de mano al interactuar */
}

/* Botón Eliminar (Rojo - Acción de peligro) */
.btn-delete {
    background-color: #fee2e2; /* Fondo rojo muy claro */
    color: #ef4444 !important; /* Texto rojo intenso */
}
.btn-delete:hover {
    background-color: #ef4444; /* Fondo rojo intenso al pasar el ratón */
    color: white !important;   /* Texto blanco para contraste */
}

/* Botón Comprar (Verde - Acción principal) */
.btn-comprar {
    background-color: #2d5a4a; /* Fondo verde oscuro */
    color: white !important;   /* Texto blanco */
    padding: 15px 40px;        /* Tamaño más grande para resaltar */
    font-size: 16px;           /* Fuente destacada */
    margin: 10px;              /* Margen de separación */
}

/* Botón Volver (Gris - Acción secundaria) */
.btn-volver {
    background-color: #e2e8f0; /* Fondo gris claro */
    color: #475569 !important; /* Texto gris oscuro */
}

/* Botón Vaciar (Naranja - Advertencia) */
.btn-vaciar {
    background-color: #fff7ed; /* Fondo naranja muy claro */
    color: #f97316 !important; /* Texto naranja vibrante */
}

/* Contenedor de los botones de la zona inferior */
.acciones-finales {
    text-align: center;        /* Centrado de los botones de acción */
    padding-bottom: 50px;      /* Espacio final de la página */
}