.cc-container {
    font-family: Arial, sans-serif; /* Mover el font-family aquí */
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
    margin: 20px auto; /* Usar margin auto para centrar horizontalmente y añadir margen vertical */
    box-sizing: border-box; /* Asegurar que el padding no desborde el width */
    
    /* Estos estilos emulan el efecto del body centrado pero dentro del contenedor */
    display: flex;
    flex-direction: column; /* Apilar el contenido de la calculadora */
    align-items: center; /* Centrar el contenido horizontalmente dentro del contenedor */
}

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 25px;
        }

        .cc-input-section {
            display: grid;
            grid-template-columns: 1fr 0.5fr 0.5fr; /* 3 columnas */
            gap: 10px;
            margin-bottom: 20px;
        }

        .cc-input-section input[type="text"],
        .cc-input-section input[type="number"],
        .cc-input-section select {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1em;
            width: 100%; /* Asegurar que ocupan el ancho completo de su celda */
            box-sizing: border-box; /* Incluir padding y border en el ancho */
        }

        .cc-input-section input[type="text"] {
            grid-column: 1 / 4; /* Ocupa las 3 columnas */
        }

        .cc-input-section button {
            grid-column: 1 / 4; /* Ocupa las 3 columnas */
            background-color: #28a745;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.2s;
            width: 100%; /* Asegurar que el botón ocupe todo el ancho */
            box-sizing: border-box;
        }

        .cc-input-section button:hover {
            background-color: #218838;
        }

        .cc-product-list-section {
            margin-bottom: 20px;
        }

        .cc-product-list-section h2 {
            color: #555;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }

        #cc-productList { /* ID permanece igual, no es una clase */
            list-style: none;
            padding: 0;
        }

        #cc-productList li { /* ID permanece igual */
            background-color: #f9f9f9;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
            justify-content: space-between;
            align-items: center;
            gap: 10px; /* Espacio entre los elementos de la lista */
        }

        #cc-productList li:last-child {
            border-bottom: none;
        }

        #productList li .cc-item-details { /* Clase prefijada */
            flex-grow: 1; /* Permite que los detalles ocupen el espacio restante */
            font-size: 0.95em; /* Ligeramente más pequeño para mejor ajuste */
        }

        #productList li .cc-item-details strong { /* Clase prefijada */
            display: block; /* Mantiene la descripción en su propia línea si es larga */
            margin-bottom: 3px;
        }

        #cc-productList li span:not(.cc-item-details) { /* Clase prefijada */
            font-weight: bold; /* Destacar el precio total del item */
        }

      #cc-productList li .cc-remove-btn  { /* Clase prefijada */
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.2s;
            flex-shrink: 0; /* Evita que el botón se encoja */
        }

        #cc-productList li .cc-remove-btn:hover { /* Clase prefijada */
            background-color: #c82333;
        }

        .cc-summary-section { /* Clase prefijada */
            border-top: 2px solid #eee;
            padding-top: 20px;
            text-align: right;
        }

        .cc-summary-section p, .cc-summary-section h3 { /* Clase prefijada */
            margin: 8px 0;
            color: #333;
        }

        .cc-summary-section h3 { /* Clase prefijada */
            font-size: 1.5em;
            color: #007bff;
        }

        .cc-summary-section button { /* Clase prefijada */
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 15px;
            transition: background-color 0.2s;
        }

        .cc-summary-section button:hover { /* Clase prefijada */
            background-color: #0056b3;
        }

        /* --- Ajustes Responsive (Media Queries) --- */
        @media (max-width: 600px) { /* Un punto de quiebre más específico para móviles */
            .cc-container {
                padding: 20px; /* Reducir padding en pantallas pequeñas */
            }

            .cc-input-section {
                grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
            }
            .cc-input-section input[type="text"],
            .cc-input-section input[type="number"],
            .cc-input-section select,
            .cc-input-section button {
                grid-column: 1 / 2; /* Ocupa la única columna */
            }

            #productList li {
                flex-direction: column; /* Apila los elementos verticalmente */
                align-items: flex-start; /* Alinea los items al inicio */
                gap: 5px; /* Reducir espacio entre elementos apilados */
            }

            #productList li .cc-item-details { /* Clase prefijada */
                width: 100%; /* Ocupa el ancho completo */
            }

            #productList li span:not(.cc-item-details) { /* Clase prefijada */
                width: 100%; /* El total del item ocupa el ancho completo */
                text-align: right; /* Alinea el precio a la derecha */
                font-size: 1.1em; /* Un poco más grande para destacar */
                margin-top: 5px; /* Espacio entre detalles y precio */
            }

            #productList li .cc-remove-btn { /* Clase prefijada */
                width: 100%; /* El botón ocupa todo el ancho */
                margin-top: 10px; /* Más espacio para el botón */
            }
        }